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

Posted 2023-02-22

【中文标题】VueJS 和 Vuetify - 用于 v-select 的数组项在数据更新后不刷新

【英文标题】：VueJS & Vuetify - Array of Arrays items for a v-select not refreshing after datas have been updated

【发布时间】：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 而不是赋值。

【参考方案1】：

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

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

【讨论】：

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

【参考方案2】：

它适用于两种语法：

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

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