Question

在路线中，我定义了一条路线＆＃34; / ajax / tutorials / unique / images＆＃34;返回以下输出：

{
    "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
    }
}

我在app.js文件中写了这段代码：

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

我在app.js中定义的图像和分页数组在运行此代码后没有任何值，但在浏览器控制台中我可以看到输出：但Vue没有设置对变量的响应：

当我使用箭头函数进行回调时，问题在于我想设置两个变量。

new Vue({
    el: '#app',

    data: {
        images: [],
        pagination: [],
    },

    mounted() {
        axios.get('/ajax/tutorials/unique/images')
            .then(response => this.images = response.data.data);
    }
});

Answer 1

您需要从数据中返回一个函数。

data: function(){
  return {
    images: [],
    pagination: [],
 }
}

这是Vue稍后在组件运行时观察images和pagination更改的方式。

Answer 2

哦，我不知道，我们可以使用箭头函数中的数组进行回调，所以我改变了下面的代码，并且它的工作

axios.get('/ajax/tutorials/unique/images')
    .then( response => [
        this.images = response.data.data,
        this.pagination = response.data.paginator,
    ]);

Answer 3

你可以这样做：

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

如何将axios响应数据提取到变量中？

3 个答案: