From a component in a v-for loop, get both loop index and an emitted value

Question

I have a component which is created by a v-for loop. The index of the for loop is important to me, and I also have to pass data with the emit method of the component to the parent. How can I get both these values, namely a value from the component child which is emitted, and also the index of the loop from the parent?

My template:

<div
v-for="(presc, index) in editedPrescription"
:key="index"
>
    <autocomplete-input 
    placeholder="Brand name"
    arialabel="BrandName"
    :searcheventresults="brandformattedsearchresults"
    :defaultterm="editedPrescription[index].brand"
    minimum-letters-to-trigger="4"
    @changed="BrandSearch"
    @selected="SelectedBrand(index)"
    />
</div>

In the child component, in a method:

Select(vindex) {
    console.log(`In Autocomplete widget, Selected vindex: ${vindex}`);
    this.searchterm = this.searcheventresults[index]
    this.$emit("selected", vindex);
},

When I try to get the emitted value in the parent method:

SelectedBrand(i, j) {
  console.log(`In SelectedBrand, i:`, i);
  console.log(`j:`, j);
},

In console,

In SelectedBrand, i: 0
PrescriptionBlock.vue ? c2fe : 1155 j: undefined    

How can I get both these values? With my current implementation, I can get only the index of the loop. If I change to @selected="SelectedBrand", then I can get the emitted value from child component. But I lose the index of the loop. I need both.

Answer 1

You can use an anonymous function like this :

@selected="(arg) => {SelectedBrand(arg, index)}"