VueJS 和 Vuetify - v-select 的数组项目数组在数据更新后不刷新

Question

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

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

另一个对象数组的目的是存储选择 select 从具有 v-模型绑定的 v-select 组件编辑。

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})
 });
}

Answer 1

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

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

Answer 2

它适用于两种语法：

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

this.liste[iC].push(...res.data);

VueJS 和 Vuetify - v-select 的数组项目数组在数据更新后不刷新

VueJS & Vuetify - Array of Arrays items for a v-select not refreshing after datas have been updated

javascript

arrays

vue.js

vuetify.js

vuetifyjs3