Vue: empty array automatically populated with Observer object

Question

I'm trying to init an empty array in the data and then get a JSON from the server and populate it.

The problem is that the array always have an extra Observer object so when i log it i see this:

empty items array: [ob: Observer]

here is a code excerpt:

data() {
        return {
            items: []
        }
    },
 created() {
         this.$http.get('/api/menus').then(function (response) {

            console.log('items before', this.items); //THIS LOGS items before: [__ob__: Observer]
             this.items = [].concat(response.body);
            this.items.forEach(function (item) {
              console.log('item', item);

              item.$add('active', false);

              item.tests.forEach(function (test) {
                  test.$add('active', false);
              });
        });

         }).catch(function (err) {
             console.error('err', err);

         });

     },

The problem is that when trying to add a new property to the objects in the array i get an error:

err TypeError: item.$add is not a function

when i debug i see it happens because it considers the observer object as part of the array.

Is it normal? should i just check if $add exists? what about when rendering it in the view, does Vue ignore this object?

I think this is normal, because VueJS use observers for reactivity, so each item in data object has attached observer.Check this but with Browser Console, not using the JsBin jsbin.com/qusugoyame/edit?html,js,console,output — Belmin Bedak
– Belmin Bedak, Commented Mar 24, 2017 at 9:44
Here is the working example jsbin.com/qusugoyame/edit?html,js,console,output - let me know are you looking for this so I can explain it and add as answer — Belmin Bedak
– Belmin Bedak, Commented Mar 24, 2017 at 10:51
Yeah using arrow function sometimes could solve context issue depending on situation.@GONG provided good answer so you can accept it, there are no need to post mine one. — Belmin Bedak
– Belmin Bedak, Commented Mar 24, 2017 at 11:07

tony19 · Accepted Answer · 2022-07-15 05:37:18Z

5

According to your code, you want to set active property in your items object to false. Also you want to set all the properties active in every item's tests property to false.

Vue.js is reactive and detect changes automatically, but only for objects themselves, not their properties. For array vue will only detect changes by those methods (more about list rendering in vue.js https://v2.vuejs.org/v2/guide/list.html#ad):

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

But how about properties? You can force vue to see change in deep of array or object with Vue.set(object, property, value) or this.$set in any Vue instance.

So, in your example you can implement it like this:

this.items.forEach(function (item, key) {
    console.log('item', item);

    this.$set(this.items[key], 'active', false);

    item.tests.forEach(function (test, testKey) {
        this.$set(this.items[key].tests[testKey], 'active', false);
    }, this);
}, this);

And it should work. Here is working example: http://jsbin.com/cegafiqeyi/edit?html,js,output (some ES6 features used, don't be confused)

edited Jul 15, 2022 at 5:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 24, 2017 at 10:53

GONG

4,0461 gold badge26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonatas Walker Over a year ago

This way your losing this context. Editing.

GONG Over a year ago

@JonatasWalker oh, yes, sorry, it's all ES6

Collectives™ on Stack Overflow

Vue: empty array automatically populated with Observer object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related