Vue.js如何将新属性添加到重复的数组对象？

Question

HTML

<div v-repeat=dudes>{{a}}, {{b}}</div>

JS

dudes = [{a:1}, {a:2}, {a:3}]

new Vue({
  el: 'body',
  data: {dudes: dudes}
})
dudes[0].b = 'test'

尝试设置dudes[0].b = 'test'不起作用。

http://jsbin.com/dogadutiqa/1/edit

除非我定义具有b属性的家伙以dudes = [{a:1, b:null}, {a:2}, {a:3}]

开头

如何添加新属性？

Answer 1

由于ES5的限制，Vue无法检测直接添加到对象或从对象中删除的属性。

您需要使用$add方法声明属性，以便可以观看它。此外，如果要删除属性，则需要$delete方法。

Answer 2

对于最新的Vue版本（本回答时为2.2.0），您应该这样做：

而不是dudes[0].b = 'test'只做：

Vue.set(dudes[0],'b','test');

从方法内部，或：

$set(dudes[0],'b','test')

来自视图模板（如@click="$set(dudes[0],'b','test')"）