Блог

У меня есть список идентификаторов из хранилища vuex.

idList = [23,54,66]

Я хочу использовать a v-for для итерации этого списка, а затем создать новую модель данных, которая выглядит так, как показано ниже, но не уверен, как настроить мой код v-model:

 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>
  

Вам нужно что-то вроде этого:

в 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>