未更新的组件列表

Posted 2023-02-23

【中文标题】未更新的组件列表

【英文标题】：List of components not updating

【发布时间】：2020-12-05 02:29:00

【问题描述】：

我有这个显示组件列表的模板：

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

当数组“items”被更新（shift() 或 push() 一个新项目）时，显示的列表不会更新。 我确定我在 Vue 的工作原理上遗漏了一些东西……但是谁能解释一下出了什么问题？

【问题讨论】：

仅使用索引作为键

【参考方案1】：

key 属性需要number | string | boolean | symbol。建议使用原语作为键。

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

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

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

---

如果您使用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)];
  

【讨论】：

非常感谢您的回答。我已经更改了 :key 并且我现在只使用“索引”，但我面临着另一种奇怪的行为。我希望“removeItem”方法始终删除第一项：this.items = [...this.items.filter((_, i) => i !== 0)];但它总是删除最后一个......我仍在调查原因。

@kururin，使用codesanbox.io（或Stack Overflowsn-p）创建minimal reproducible example，我会看看。

这里是一个例子：codepen.io/kururin/pen/WNwwgpo?editors=1111 我敢肯定这很愚蠢......但我无法理解。

问题（我认为）是索引。它是这样工作的：codepen.io/kururin/pen/rNeeqqB?editors=1010

@kururin，从 Vue 的角度来看，您所有的 items 都是相同的（它们的值为 'race-item'）。它们在模板中分配的随机数是一种副作用，不会被跟踪。 Vue 正确删除了第一个，但没有唯一标识符来跟踪（和更新）每个人的模板（因为它们的引用是相等的：'race-item' 字符串。正如我所说，你需要一个唯一标识符。最简单方法是在创建它们时分配它们的随机值：codepen.io/andrei-gheorghiu/pen/RwaadMY。现在 Vue 将正确地跟踪每个值。

【参考方案2】：

你能试试这样的吗

将 componentKey 放在 v-container 上并在推送完成后使用 forceRender()

【讨论】：

不要使用图片代替代码。您正在禁用代码的复制/粘贴，这大大降低了您的答案对 OP 和有类似问题的未来用户的实用性。