如何在 Element UI 中子 Select Dropdown 的 @change 事件上获取选定的行索引？

Question

我正在生成多个输入元素的列表，其中一个是<el-select>. 在更改此选择菜单时，我得到的值与该选择相关。但在这里，问题是，我还想获取父 v-for 项目的索引/行号。你可以通过下面的代码明白我的意思：

<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>

从上面的代码可以看出，我想在updateDropdowns. 我尝试传递 updateDropdowns(index) ，在这里我得到了索引号，但丢失了该下拉列表的选定值。我怎样才能同时通过？

Answer 1

这是解决方案：

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

您可以使用 $event 来引用当前事件。

Answer 2

您可以使用自定义事件来管理它

<div>
   <child @clicked="ongetChild"></child>
</div>

==孩子==

观察你的下拉菜单的变化

export default {
 watch: {
 'domain.SelectedBrand':function(value) {
   this.$emit('clicked', 'value')
 }
}}

===父==

export default {
 ongetChild (value) {
  console.log(value) // someValue
  }
 }
}