VueJS - Axios array not updated
I am trying to update from the API of my array declared in data. When I initialize an array with an object, that object renders well in the HTML code. It seems that the array is not "saved" after the action of the axios call. Can anyone help me? I have no error / message code.
var vm = new Vue({
el: '#recettes',
data: {
results: []
},
created() {
axios.get('url')
.then((response) => {
this.results = response.data
console.log("Size before end of scope = " + this.results.length) // = 4
});
console.log("Size after = " + this.results.length) // = 0
}
});
Response API:
[
{
"id": 1,
"titre": "Cassoulet",
"contenu": "Couper. Faire cuire...",
"id_util": 1
},
{
"id": 2,
"titre": "Gateau",
"contenu": "chocolat",
"id_util": 4
},
{
"id": 3,
"titre": "Gateau",
"contenu": "fraise",
"id_util": 5
},
{
"id": 4,
"titre": "Gateau",
"contenu": "Mélanger, cuire, four 220°...",
"id_util": 5
}
]
Template:
<div id="recettes">
<div v-for="result in results">
<div class="card">
<div class="card-divider">
{{ result.titre }}
</div>
<div class="card-section">
{{ result.contenu }}
</div>
</div>
</div>
</div>
UPDATE
var vm = new Vue({
el: '#recettes',
data: {
results: []
},
created() {
axios.get('URL')
.then(response => {
this.results = response.data
console.log("size: " + this.results.length)
console.log('results[0]: ' + this.results[0].titre)
})
}
});
With this code, the results [0] .titre contain the correct string. But in the HTML code the maps are not displayed. And with this code:
var vm = new Vue({
el: '#recettes',
data: {
results: [
{"id" = 1, "id":1,"titre":"Cassoulet","contenu":"Couper. Faire cuire...","id_util":1}
]
},
created() {
axios.get('URL')
.then(response => {
this.results = response.data
console.log("size: " + this.results.length)
console.log('results[0]: ' + this.results[0].titre)
})
}
});
HTML displays one card with caption = "Cassoulet" and contenu = "Couper. Faire cuire ..."
This is why I said that it seems that the array is not updating ...
source to share
Hi I think this is an asynchronous problem. As you can see, javascript doesn't wait for another to complete the function. Try it.
created() {
axios.get('url')
.then((response) => {
this.results = response.data
console.log("Size before end of scope = " + this.results.length) // = 4
return true;
}).then((response) => {
console.log("Size after = " + this.results.length) // = 4
});
// console.log("Size after = " + this.results.length) // = 0
}
UPDATE1: added violin
Here is a sample violin for you to watch. https://jsfiddle.net/khenxi/n49zj258/
source to share
Vue is reactive.
The request is asynchronous, so the code where you check the size executes up to part then()
. If you put {{ results.length }}
in your template it will 0
then 4
very quickly, you probably won't even see it at 0.
Just because the length 0
when you check in doesn’t mean it isn’t "stored".
If you want the length of a variable, you can use a computed property and follow these steps:
computed: {
resultsLength () {
return this.results.length
},
}
source to share