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进行演示

Codepen

Answer 2

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

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

来实现此目的。

对列表中的每个项目重复q-select，并对列表中的每个项目以不同的方式选择q-select的选定值

2 个答案: