Vue JS returns [__ob__: Observer] data instead of my array of objects Vue JS returns [__ob__: Observer] data instead of my array of objects vue.js vue.js

Vue JS returns [__ob__: Observer] data instead of my array of objects


Can also try this:

var parsedobj = JSON.parse(JSON.stringify(obj))console.log(parsedobj)

It was brought by Evan You himself here and more info on that here

But waiting for the answer is a first step.


This happens because Vue js convert every item in the data to something that can be observed. So it makes sense if you console log something in the data. The output will be something wrapped into an observer.

To have a better vision on your data I suggest you to install the Vue dev tools. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en


Here is my solution:

add new method something like log to your $root component. App.vue's created is recommended:

this.$root.log = function log() {  for (let i = 0; i < arguments.length; i += 1) {    if (typeof (arguments[i]) === 'object') {      try {        arguments[i] = JSON.parse(JSON.stringify(arguments[i]));      } catch (e) {        console.error(e);      }    }  }  console.log(...arguments);};

just call this.$root.log(this.pigeons) in your component.

My result:

BEFORE:

enter image description here

AFTER:

enter image description here