Как получить индекс выбранной строки в событии @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
  }
 }
}