How to get selected row index on @change event of child Select Dropdown in Element UI?

Question

I'm generating a list of multiple input elements in which one is <el-select>. On changing this select menu, I'm getting value bounded with that select. But here, question is, I also want to get index/row number of the parent v-for items. You can understand what I meant from the following code:

<el-form-item v-for="(domain, index) in Prescription.domains">
    <div class="col-md-2" v-if="medicineIsSelected === true">
        <small>Select Brand:</small>
        <el-select v-model="domain.SelectedBrand" clearable placeholder="Select" @change="updateDropdowns"> <!-- Here I want to pass {{index}} also -->
          <el-option
            v-for="item in selectedMedicineMetaInfo.BrandName"
            :key="item.value.name"
            :label="item.value.name"
            :value="item.value.rxcui">
          </el-option>
        </el-select>
    </div>
</el-form-item>

As you can see from above code, I want to pass index in updateDropdowns. I tried passing updateDropdowns(index), here I got the index number but lost the selected value of that dropdown. How can I pass both?

Solution

Here is the solution :

@change="updateDropdowns(index, $event)"

you can use $event to reference current event.

Comments

[Faizan Saiyed]

I'm not using any parent-child components. How can I do with ElementUI?

[Faizan Saiyed]

Wow! you are a lifesaver! Thanks a lot! Works perfect!

[channasmcs]

easily you can create child component for el-select