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'
Trying to set dudes[0].b = 'test' doesn't work.
http://jsbin.com/dogadutiqa/1/edit
Unless I define dudes with a b property to begin with dudes = [{a:1, b:null}, {a:2}, {a:3}]
How do I add new properties?
Due to the limitations of ES5, Vue cannot detect properties directly added to or deleted from an object.
You need to use $add method to declare the property, so that it could be watched. Also if you want to remove a property, you need $delete method.
dudes[0].a = 'test' that works. (changing a instead of b)
a is an existing proerty while b is not. You need $add to declare the property key first, so that it could be watched. Also call $delete if you want to remove a property.
For the latest Vue version (2.2.0 at the time of this answer) this is what you should do:
Instead of dudes[0].b = 'test' just do:
Vue.set(dudes[0],'b','test');
from inside the method, or:
$set(dudes[0],'b','test')
from inside the view template (like in @click="$set(dudes[0],'b','test')")
