更新 v-for 中使用的数组内的对象时，Vue js 反应性问题答案

【问题标题】：Vue js reactivity issue when updating objects inside array used in v-for更新 v-for 中使用的数组内的对象时，Vue js 反应性问题
【发布时间】：2016-05-17 04:41:39
【问题描述】：

我有一个使用 vue.js 的应用程序。我在对象数组中使用 v-for 生成结果列表。当我使用下划线 _.extend 更新数组中第 n 个项目内的对象时，项目的视图不会更新。 http://vuejs.org/guide/reactivity.html 有一个解决这个问题的方法，它表示像这样使用 _.extend：

this.results.displayed[key] = _.extend({}, this.results.displayed[key], detail.items);

但问题是当我像它所说的那样使用扩展时，它不会更新视图。

【问题讨论】：

没有足够的信息来找出问题所在。你能在小提琴中重新创建它吗？

标签： javascript arrays underscore.js javascript-objects vue.js

【解决方案1】：

通过确保包含 v-for 的标签被标签包裹，我解决了 v-for 中的项目不更新的问题。

它被包装在一个 v-ons-list 中。我可以想象有些人将它包装在一个 div 标签中。在尝试所有其他更复杂的解决方案之前，可以快速消除这种可能性。

【讨论】：

已经很久了，但我遇到了同样的问题，这解决了它

【解决方案2】：

当您通过数组索引设置新项目时，Vue 无法检测到更改。为了解决这个问题，您可以使用 Vue 添加到数组中的 $set() 方法。

var newObject = _.extend({}, this.results.displayed[key], detail.items);
this.results.displayed.$set(key, newObject);

更多信息here.

【讨论】：

这是一个 jsfiddle 演示使用 .$set