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

Answer 3

在@change="updateDropdowns"标签中使用el-select

使用vue方法：

updateDropdowns(index) {
    this.selectedMedicineMetaInfo.BrandName[index-1]; // this gives selected option details
}

如何在元素UI中的子选择下拉列表的@change事件上获取选定的行索引？

3 个答案: