Repeating q-select for each item in list and treat selected value for q-select differently for each item of the list

Question

Basically, I want to repeat q-select/q-tree for each item in the list:

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

In data section, I have following code

data(){

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

The current result shown will reflect the value of each item.

i'm using quasar framework with Vue js.

Answer 1

Your selected_val model data should not be a string, but an array.

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>

See codepen for demonstration

Codepen