Vue v-for 数据不会在属性更改时更新答案

【问题标题】：Vue v-for data does not get updated on properties changeVue v-for 数据不会在属性更改时更新
【发布时间】：2018-08-14 10:59:35
【问题描述】：

所以我呈现了一个项目列表，例如

<div v-for="(item, index) in items" :key="item.id">
  <item :item="item"></item>
</div>

项目如下所示：

items: Array[20]
  0: Object
    sold: false
  1: Object
    sold: true

现在我使用叠加层显示这些项目。例如，一旦一个项目被标记为“已售出”，我就使用 VueX 通过查看 VueX 数据来更改“项目”。所以我说

items[0].sold = true

现在项目已成功更改，但是，我的列表不会重新渲染，因此不会显示任何更改。知道为什么以及如何克服这个问题吗？一种解决方案是在每个“项目”组件中监视更改，但这意味着我可以有数百个 Vue 组件监视更改，我想这不是一个很好的解决方案性能明智。

谢谢！

【问题讨论】：

好吧，<item> 组件只接收项目 ID 作为道具，而不是整个（更新的）项目。那么如何在该组件中获取项目数据呢？大概是你的问题。我会简单地传递整个项目而不是 id。
如果它不监听属性更新，你总是可以使用$forceUpdate();强制 vue 更新
$forceUpdate() 不起作用

标签： vue.js

【解决方案1】：

我建议将您当前的代码更改为：

<div v-for="(item, index) in items" :key="item.id">
  <item :item="item"></item>
</div>

然后在您的项目组件中，您可以呈现您想要的有关项目的任何信息。这样，您还可以根据需要获得关于每个项目的 sold 属性的反应性。

【讨论】：