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
You can use v-if
directive to render the component once the data is there.
<h3 v-if="pigeons.length > 0">{{ pigeon.id }}</h3>
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.
Well I had exactly same problem but I solved it:
Just move app.js
external link to head tag.
The best way possible
obj2 = JSON.stringify(obj)
obj3 = JSON.parse(obj2)
Or
obj2 = Object.assign([], obj)
It was brought by Evan You himself here and more info
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
You should probably wait for the fetch to finish then console.log the result ..
created(){
this.fetchPigeons().then(() => console.log(this.pigeons));
},
The way you were doing it you were logging the result synchronously so it gets executed before the fetch is done.
Edit: Also as @barbsan pointed out in his comment below your fetchPigeons
needs to return a promise for then
to work. fetch
returns a promise so you just need to return fetch in fetchPigeons
fetchPigeons(){
return fetch('api/racingloft')
.then(res => res.json())
.then(res => {
console.log(res.data); // Here I get what I need
this.pigeons = res.data;
})
}