Повторяя q-select для каждого элемента в списке и обрабатывайте выбранное значение для q-select по-разному для каждого элемента списка

Question

В основном, я хочу повторить q-select / q-tree для каждого элемента в списке:

   <q-item v-for="item in list">
        {{item}}
        <q-select
          v-model="selected_val"
          radio
          :options="option"
        />
   </q-item>

В разделе данных у меня есть следующий код

data(){

return{
     list:['item1','item2','item3'],
     option:[
          {label:'first',value:'first'},
          {label:'second',value:'second'},
          {label:'third',value:'third'}
        ],
    selected_val:''
}

текущий результат будет отображать значение каждого элемента.

Я использую квазар-фреймворк с Vue js.

Answer 1

Данные модели selected_val должны быть не строкой, а массивом.

new Vue({
  el: '#q-app',
  data(){
    return {
        list:['item1','item2','item3'],
        selected_val: [],
        options: [
              {label:'first',value:'first'},
              {label:'second',value:'second'},
              {label:'third',value:'third'}
            ]
    }
  }
})

<div id="q-app">
  <q-item v-for="(item, index) in list">
    <q-item-side>{{item}} </q-item-side>
    <q-item-main>
    <q-select v-model="selected_val[item]" radio :options="options" />
    </q-item-main>
   </q-item>
  <q-list>
    <q-item v-for="item in list"> {{item}} selected value: {{selected_val[item]}}</q-item>
</div>

См. Кодовый блок для демонстрации

Codepen

Answer 2

Это потому, что вы используете один и тот же v-модал для всех q-select.Каждый q-select должен иметь уникальный v-модал.

Этого можно добиться, создав аналогичный массив в виде списка и добавив его в v-modal