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

Question

I\'ve created a page where I want to get all my data from the database with an API call, but I\'m kinda new to VueJS and Javascript aswell and I don\'t know where I\'m getti

Answer 1

Thank you for all your suggestion. Things worked on my end by just using "const".

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

Thanks, Ranjit

Answer 2

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:

AFTER:

Answer 3

As mentioned by Husam Ibrahim, you should wait the async fetch() function to resolve. Another approach could be use async/await in your function:

methods: {
    async fetchPigeons(){
        await fetch('api/racingloft')
               .then(res => res.json())
               .then(res => {
                   console.log(res.data);
                   this.pigeons = res.data;
               })
    }
}

And then it should work:

<template>
  <div>
    <h2>Pigeons in the racing loft</h2>
    <div class="card-content m-b-20" v-for="pigeon in pigeons" v-bind:key="pigeon.id">
        <h3>{{ pigeon.id }}</h3>
    </div>
  </div>
</template>

Answer 4

If your goal is debugging WHAT included in Observer Vue instance, this is my solution:

Print out that variable in template block belongs to your Component

After that, you can reformat the structure of the output to observe the detail.

For example:

<template>
  <div>
    {{ pigeons }}
  <div>
</template>

Another way, if you wanna see it in console, you should put the console.log into mounted phase. Because at created phase, the this.pigeons still be empty. Ref: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Hope this helpful.

Answer 5

I got the same problem still stuck ...

Wrote these according to Evan(Vue Author) JSON.parse(JSON.stringify(res.data)) method, But why can't normal data?

  methods: {
    async getdata() {
      console.log(1);
      await axios.get(API).then((res) => {
          console.log(2);
          if (!this.dataList.length) {
            this.dataList = JSON.parse(JSON.stringify(res.data));
            console.log(3);
            console.log(res.data, 'res.data ');
            console.log(this.dataList, 'this.dataList')
            console.log('----------check-----------',JSON.parse(JSON.stringify(res.data)));
          }
        })
        .catch(err => {
          console.error('failed: ' + err);
        })
      console.log(4);
    },