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' 无效。

除非我用 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')"）

Vue.js How to add new property to a repeated array object?