VueJS 和 Vuetify - 用于 v-select 的数组项在数据更新后不刷新答案

【问题标题】：VueJS & Vuetify - Array of Arrays items for a v-select not refreshing after datas have been updatedVueJS 和 Vuetify - 用于 v-select 的数组项在数据更新后不刷新
【发布时间】：2021-10-13 23:57:21
【问题描述】：

在数组列表中，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})
 });
}

【问题讨论】：

我已经尝试了一个对象数组，它也是一样的。
这是 Vue 3 还是 Vue 2 ？
包 JSON : "vue": "^2.6.12",
@IVOGELOV 你认为 Vue 3 可以解决这个问题吗？但我还没有为我的项目分析 Vue 3 的副作用。
Vue 3 使用新的Proxy 接口，因此可以正确处理对数组元素的直接分配。然而，这在 Vue 2 中是不可能的，所以你必须使用 Array.splice 而不是赋值。

标签： javascript arrays vue.js vuetify.js vuetifyjs3

【解决方案1】：

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

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

【讨论】：

传播不是这里的问题 - 问题是直接分配给数组内的元素。你应该改用Array.splice。

【解决方案2】：

它适用于两种语法：

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

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

【讨论】：