Как получить выбранный select в списке v-for?

Question

[kmvdev]

Как можно получить текущий селект на элементе по клику? Есть список элементов v-for и в каждом элементе есть селект с опциями. На каждом из элементов можно выбрать разную опцию. Вопрос как при клике по конкретному элементу получить конкретно его выбранную опцию? https://codesandbox.io/s/thirsty-roman-fol31l?file... накидал структуру примерную, подскажите кто сталкивался

Answer 1

[0xD34F]

Добавить select'у поддержку директивы v-model:

props: {
  modelValue: {
    type: String,
    default: '',
  },
  ...

<select
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>
  <option
    v-for="n in options"
    v-text="n.label"
    :value="n.value"
  ></option>
</select>

В родительском компоненте, сделать свойство selected вместо числа массивом и хранить там выбранные значения:

data: () => ({
  selected: Array(10).fill(null),
  ...
}),
methods: {
  getValue(index) {
    this.active = index;
    console.log(this.selected[index]);
  },
},

<div
  v-for="(n, i) in selected"
  class="test__item"
  :class="{ test__item_active: i === active }"
>
  <span @click="getValue(i)">элемент списка</span>
  <Select v-model="selected[i]" :options="options" />
</div>