Geek Answers Handbook

VueJS is a problem with understanding. $ Set and. $ Add

I am trying to build an array of objects in VueJS and I am having problems with .$setand .$add.

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

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

New objects are added in response to an AJAX call that returns JSON in the same format 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 mine data, but when I try attendees.lengthafter adding a member, I get undefined. If I use attendees: [], a new object is not added. And finally, if I use .$set(data.userToken, data), it is not added to the required format 'token':{data..}.

What could be the problem? What is the correct way to use $.addwhen starting with an empty array of objects?

UPDATE

, , attendees: {}, , ,

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

, .

+4
2

({}), length. .

([]), $set (, , , .push()) - $add , .

- ?

2:

Vue 1.x. Vue 2.x :

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

: https://vuejs.org/v2/api/#Vue-set

EDIT:

, $set . :

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

0.6.0, :

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

http://vuejs.org/guide/reactivity.html#Change_Detection_Caveats

0

More articles:


All Articles