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 getting it wrong. I did test it with Postman and I get the correct JSON back.

This is what I get:

[__ob__: Observer] length: 0 __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0} __proto__: Array 

This is what I want:

(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …] [0 … 99] [100 … 139] length: 140 __ob__: Observer {value: Array(140), dep: Dep, vmCount: 0} __proto__: Array 

Thats my Vue template file:

<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>  <script> export default {     data(){         return{             pigeons: [],             pigeon: {                 id: '',                 sex: '',                 color_id: '',                 pattern_id: '',                 user_id: '',                 loft_id: '',                 country: '',                 experience: '',                 form: '',                 fatique: ''             },             pigeon_id: ''         }     },     created(){         this.fetchPigeons();         console.log(this.pigeons); // Here I got the observer data instead my array     },      methods: {         fetchPigeons(){             fetch('api/racingloft')             .then(res => res.json())             .then(res => {                 console.log(res.data); // Here I get what I need                 this.pigeons = res.data;             })         }     } } </script> 

I've tried to do it with axios aswell, but it gave me exactly the same thing. When I console it from the method it gives my data, but outside it just gives nothing.

Answer 1

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.