quasar-framework - 对列表中的每个项目重复 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 的 quasar 框架。

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

这是因为您对所有 q-select 使用相同的 v-modal。每个 q-select 都需要有唯一的 v-modal。

您可以通过创建与列表类似的数组并将其添加到 v-modal 来实现此目的