Question

我有一个来自vuex商店的ID列表。

idList = [23,54,66]

我想使用v-for遍历该列表，然后创建一个如下所示的新数据模型，但不确定如何设置我的v模型代码：

newData = {
     [ 
       {
        id: 23,
        url: // based off v-text-field,
        key: //based off v-text-field
       },
       {
        id: 54,
        url: // based off v-text-field,
        key: //based off v-text-field
       },
       {
        id: 66,
        url: // based off v-text-field,
        key: //based off v-text-field
       },
     ]
    }

到目前为止，我的代码：

<v-checkbox
    class="stream-targets"
    v-for="(target,index) in idList"
    v-model="locationTarget"
    :value="target"
>
    <template v-slot:label>
       <span class="check-text" v-model='???'>{{ target}} [{{ target}}]</span>
       <v-text-field placeholder="URL" v-model='??'></v-text-field>
       <v-text-field placeholder="Key" v-model='??'></v-text-field>

    </template>
</v-checkbox>

Answer 1

你需要这样的东西：

在vuex中：

state: {
       idList: [23,54,66]
   },

在组件中和在created（）方法中：

 var idList = this.$store.state.idList;
    idList.forEach(el => {
      this.newData.push({
        id: el,
        url: '',
        key: ''
      });
  });

和组件中的

<v-checkbox
    class="stream-targets"
    v-for="(target,index) in newData"
    :key="index"
    v-model="locationTarget"
    :value="target"
>
    <template v-slot:label>
       <!-- <span class="check-text" >{{target.id}}</span> -->
       <v-text-field placeholder="URL" v-model='target.url'></v-text-field>
       <v-text-field placeholder="Key" v-model='target.key'></v-text-field>
    </template>
    
</v-checkbox>

VUE：对半动态对象使用v-for

1 个答案: