Я создал страницу, где я хочу получить все свои данные из базы данных с помощью вызова API, но я тоже новичок в VueJS и Javascript, и я не знаю, где я ошибаюсь. Я проверил его с Postman, и я вернул правильный JSON.
Это то, что я получаю:
[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
Это то, что я хочу:
(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 139]
length: 140
__ob__: Observer {value: Array(140), dep: Dep, vmCount: 0}
__proto__: Array
Это мой файл шаблона Vue:
<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>
Я тоже пытался сделать это с аксиомами, но это дало мне то же самое. Когда я утешаю его из метода, он дает мои данные, но за его пределами ничего не дает.