Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

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?

share|improve this question
up vote 2 down vote accepted

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.

share|improve this answer
    
I have an array of objects, not strings. So your example code doesn't really make sense. Also, you're kind of wrong, because if I do dudes[0].a = 'test' that works. (changing a instead of b) – Stephen Bugs Kamenar Apr 21 '15 at 3:06
    
@StephenBugsKamenar Well, I just noticed that I misunderstood your question. 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. – Leo Apr 21 '15 at 3:35
    
I don't know how I missed that one in the docs. Makes sense, thanks! – Stephen Bugs Kamenar Apr 21 '15 at 4:00
    
this is not in the API, at least not anymore, therefor not a solution. – Kevin Compton Feb 3 at 0:06
    
@KevinCompton Per OP's question, if he hasn't updated vue.js, then it is the solution. It just may not be the solution for the latest version. – Leo Feb 3 at 2:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.