How to extract axios response data into variables? - laravel

Question

In routes, I define a route "/ajax/tutorials/unique/images" that returns the below output:
{
"data": [
{
"path": "/images/posts/1474360249_qDhAVF0mA4TnCVUmfcIpkNtvEkyhpV.png"
},
{
"path": "/images/posts/1475575942_ZjuBj3u1rIvxdz1sK0pAuufzY8yjCT.png"
},
{
"path": "/images/posts/1476871481_H63O2o55sBg8Qx1bf6S8wW1M82XXJ1.png"
},
{
"path": "/images/posts/1476896115_JdyLpsxpcfL8kcpUwpFURV963WdeNa.png"
},
{
"path": "/images/posts/1487368925_RSouQqnDiu1ieBGfWStfHlodcptVWA.png"
},
{
"path": "/images/posts/1487368919_iAJUQpd3qx7RTB3ZnMsND0KmjrKrKu.png"
}
],
"paginator": {
"total_count": 15,
"total_pages": 3,
"current_page": 1,
"limit": 6
}
}
I wrote this code in app.js file:
new Vue({
el: '#app',
data: {
images: [],
pagination: [],
},
mounted() {
axios.get('/ajax/tutorials/unique/images')
.then(function (response) {
this.images = response.data.data;
this.pagination = response.data.paginator;
console.log(response.data.data);
console.log(response.data.paginator);
});
}
});
The images and pagination array that I define in app.js don't have any value after running this code, but in the browser console I can see the output:
But Vue doesn't set the response to variables:
When I use arrow function for callback it works, the problem is that I want to set two variable.
new Vue({
el: '#app',
data: {
images: [],
pagination: [],
},
mounted() {
axios.get('/ajax/tutorials/unique/images')
.then(response => this.images = response.data.data);
}
});

Answer 1

Oh I didn't know that, We can use array in arrow function for callback, So I changed code like below, and it's work
axios.get('/ajax/tutorials/unique/images')
.then( response => [
this.images = response.data.data,
this.pagination = response.data.paginator,
]);

Answer 2

You need to return a function from data.
data: function(){
return {
images: [],
pagination: [],
}
}
This is how Vue will observe the images and pagination changes later when you component runs.

Answer 3

You could simply do this:
axios.get('/ajax/tutorials/unique/images')
.then(response => {
this.images = response.data.data
this.pagination = response.data.paginator
console.log(response.data.data)
console.log(response.data.paginator)
})