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

Question

我有一个使用vue.js的应用程序。我在对象数组中使用v-for生成结果列表。 当我更新数组中第n项内的对象时，使用下划线_.extend，项目视图不会更新。 在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标签中。在尝试所有其他更复杂的解决方案之前，可以快速消除这种可能性。