0

在数组列表中，v-select 与 v-for 循环绑定。

但是，当我使用从我的 API 接收到的每个数组的数据更新我的数组列表时，v-select 组件中的项目不会获得新数据，并且每个数组的列表也不会出现。

另一个对象数组的目的是存储从 v-select 组件中选择的选项以及 v-model 绑定。

Vue 模板

...

<tr
v-for="(elem, idx) in anotherTable.elem"
:key="idx">
 <td>
  <v-select
  :items="liste[idx]"
  v-model="selectList[idx]"
  item-text="numLot"
  return-object
  class="input-prod"
  hide-details
  clearable
  outlined
  label="Lot composant">
   <template v-slot:item="{ item }">
    <v-list-item-content>
     <v-list-item-title
      v-text="`Lot : ${item.numLot}`"
     ></v-list-item-title>
     <v-list-item-subtitle
      v-text="`Quantité en stock : ${item.qteStock}`"
     ></v-list-item-subtitle>
     <v-list-item-subtitle
      v-text="`${item.codeLieuStock} : ${item.libLieuStock}`"
     ></v-list-item-subtitle>
     </v-list-item-content>
     <v-list-item-action>
       <v-icon>mdi-coin</v-icon>
     </v-list-item-action>
    </template>
    <template slot="no-data">
      <v-list-item>Choisir un composant</v-list-item>
    </template>
  </v-select>
</td>
</tr>
...

Vue组件中的JS声明


data() {
 return {
  liste: [
   [], [], [], [], [],
   [], [], [], [], [],
   [], [], [], [], [],
   [], [], [], [], []
 ],
 selectList: [
   {}, {}, {}, {}, {},
   {}, {}, {}, {}, {},
   {}, {}, {}, {}, {},
   {}, {}, {}, {}, {}
  ],
 }
}

填充我的数组的 JS（记录和工作）

for(let iC = 0; iC < anotherTable.length; iC++) {

 await ApiService.getProducts(anotherTable.component[iC].code)
 .then((res) => {
   this.liste[iC]  = [ ...res.data ];
 })
 .catch((err) => {
   this.$store.dispatch("updateSrvMsg", {type: 'error', content: err.message})
 });
}
4

2 回答 2

0

经过一些官方文档研究，我发现了一些反应性限制：

我将尝试使用突变方法而不是仅仅传播一个数组的内容。

于 2021-08-12T15:23:52.977 回答
0

它适用于两种语法：

this.liste[iC].splice(0, 0, ...res.data);

this.liste[iC].push(...res.data);
于 2021-08-16T12:01:34.267 回答