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

Question

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

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

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

Answer 1

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

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

更多信息here。

Answer 2

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

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