NightMICU NightMICU - 4 months ago 37
JSON Question

VueJS - trouble understanding .$set and .$add

I am trying to build an array of objects in VueJS and I am running into some issues with

.$set
and
.$add
.

For example, I need the following structure when adding new items/objects:

{
"attendees": {
"a32iaaidASDI": {
"name": "Jane Doe",
"userToken": "a32iaaidASDI",
"agencies": [
{
"name": "Foo Co"
}
]
}
}
}


New objects are added in response to an AJAX call that returns JSON formatted the same as above. Here is my Vue instance:

var vm = new Vue({
el: '#trainingContainer',
data: {
attending: false,
attendees: {}
},
methods: {
setParticipantAttending: function(data)
{
if (data.attending)
{
this.attendees.$add(data.userToken, data);
} else {
this.attendees.$delete(data.userToken);
}
}
}
});


This only works if I start with
attendees: {}
in my
data
but when I try
attendees.length
after adding an attendee, I receive
undefined
. If I use
attendees: []
, the new object does not appear to be added. And lastly, if I use
.$set(data.userToken, data)
it does not add in the
'token':{data..}
format required.

What could be the issue here? What is the correct way to use
$.add
when starting with an empty array of objects?

UPDATE

I found that it works if I set
attendees: {}
and then, when adding a new object,

if (data.userToken in this.attendees) {
this.attendees.$set(data.userToken, data);
} else {
this.attendees.$add(data.userToken, data);
}


Not sure if there is a better way to accomplish this.

Answer

If you set attendees to an empty object ({}) it will not have a length attribute. That attribute is on Arrays.

If you set attendees to an empty array ([]) then you need to use $set (or really, I think you want .push()) – $add is intended for use on objects not on arrays.

I'm not quite following your last question – could you add more context?

More information here: http://vuejs.org/guide/best-practices.html#Adding_and_Deleting_Properties

EDIT:

Responding to your update, you should be able to just use $set in all cases. I.e. just do this:

this.attendees.$set(data.userToken, data);