Vue v-for数据不会随属性更改而更新

Question

所以我渲染了一个项目列表

<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组件在监视更改，我想这并不是一个很好的解决方案性能。

谢谢！

Answer 1

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

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

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