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以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')" ）