Struggling to retrieve data from the database using an API call in my VueJS application. I'm new to VueJS and JavaScript, tested the API with Postman and received the correct JSON response.
Current output:
[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
Expected output:
(140) [{…}, {…}, {…}, ...]
[0 … 99]
[100 … 139]
length: 140
__ob__: Observer {value: Array(140), dep: Dep, vmCount: 0}
__proto__: Array
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); // Getting observer data instead of the array here
},
methods: {
fetchPigeons(){
fetch('api/racingloft')
.then(res => res.json())
.then(res => {
console.log(res.data); // Retrieved necessary data
this.pigeons = res.data;
})
}
}
}
</script>
Tried using axios as well, but facing the same issue. Data is accessible within the method but not outside it.