CODEWITHSUNDEEP
laravelvue.js
Ahad abasi rad
Ahad abasi rad

Reputation: 117

How to extract axios response data into variables?

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: The response in browser console But Vue doesn't set the response to variables:

The output by VueDevTools

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);
    }
});

Upvotes: 1

Views: 4581

Answers (3)

Ikbel
Ikbel

Reputation: 7851

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)
        })

Upvotes: 0

Ahad abasi rad
Ahad abasi rad

Reputation: 117

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,
    ]);

Upvotes: 1

Simon
Simon

Reputation: 2623

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.

Upvotes: 0

Related Questions