I have been attempting to create an empty array in the data and then fetch a JSON from the server to populate it.
The issue I am encountering is that the array consistently includes an extra Observer object, so when I log it, I see:
empty items array: [ob: Observer]
Below is a snippet of the code:
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 arises when attempting to add a new property to objects in the array, resulting in an error:
err TypeError: item.$add is not a function
Upon debugging, I noticed this occurs because it considers the observer object as part of the array.
Is this behavior normal? Should I simply check if $add exists? Furthermore, how does Vue handle rendering this object in the view?