未更新的组件列表

问题描述

我让此模板显示组件列表：

<template>
  <v-container id="container">
    <RaceItem v-for="(item,index) in items" :key="item + index" />
  (...)

当更新数组“ items”（shift（）或push（）一个新项）时，显示的列表未更新。 我确定我在Vue的工作原理上漏了一些东西...但是有人能解释出什么问题吗？

解决方法

可以尝试这样的事情吗

将componentKey放在v容器上，并在完成推送后使用forceRender（）

,

key属性期望number | string | boolean | symbol。建议使用基元作为键。

最简单的用法是使用每个元素的原始唯一属性来跟踪它们：

 <RaceItem v-for="item in items" :key="item.id" />

...假设您的items具有唯一的id。

---

如果使用index作为键，则每次更新数组时，都必须将其替换为自身的更新版本（即：this.items = [...items];-其中items包含突变）。

在这种情况下，方法的外观如下：

methods: {
  applyChangeToItem(item,change) {
    // apply change to item and return the modified item
  },updateItem(index,change) {
    this.$set(
      this.items,index,this.applyChangeToItem(this.items[index],change)
    );
  },addItem(item) {
    this.items = [...this.items,item];
  },removeItem(index) {
    this.items = [...this.items.filter((_,i) => index !== i)];
  }
}