Vue: How to add a new property to vue (object) data?

Created on 28 Jul 2016  ·  3Comments  ·  Source: vuejs/vue

My data goes below

 data: {
                contacts: {
                    "1": {
                        isSelected: false,
                        UID:"1",
                        cardType: 0      
                    },
                    "2": {
                        isSelected: false,
                        UID:"2",
                        cardType: 0    
                    },
                    "3": {
                        isSelected: false,
                        UID:"3",
                        cardType: 0    
                     },
            }
...

I could use this method to add new contact, but it got a compatibility problem, so I wonder are there some other ways to add new property to object, or I'd better change to use array instead of object.
this.contacts = Object.assign({}, this.contacts, newObj);

Thanks a lot.

Most helpful comment

Thanks, using the set method, and It's OK now.

this.$set('contacts[' + newPsgId + ']', newObj)
Vue.set(this.contacts[newPsgId], 'name', this.editPsgName);  

All 3 comments

Read the docs: Vue.set

Thanks, using the set method, and It's OK now.

this.$set('contacts[' + newPsgId + ']', newObj)
Vue.set(this.contacts[newPsgId], 'name', this.editPsgName);  

The previous solution does not work for me (Vue ^ 3.0.0)
Do it myself. Hope this helps someone.

this.$set(this.contacts, newPsgId, newObj)
Was this page helpful?
0 / 5 - 0 ratings