根据axios GET请求的响应填充Vue数据

时间:2019-01-14 00:59:15

标签: javascript vue.js vuejs2 axios

想象一下,我向API端点发出GET请求,该请求将返回10个图像,如下所示:

export default {
    data: function() {
        return {
            images: []
        }
    },
    mounted() {
        axios.get('https://api.unsplash.com/photos/?client_id=secret')
        .then(response => {
            for (var i = 0; i < response.data.length; i++) {
                this.images.push(response.data[i]);
            }
        })
        .catch((error) => console.log(error));
    }
}

我是否必须初始化一个空的图像数组,然后像我在代码中一样使用for循环使用响应填充它,还是那是不必要的?除非我自己将它们实际存储在自己的变量中,否则我真的想不出其他方法来遍历返回的图像。

1 个答案:

答案 0 :(得分:3)

我没有发现任何错误。不过,由于只分配了一次图像,因此只需将其分配给挂接的钩子即可。

export default {
    data: function() {
        return {
            images: []
        }
    },
    mounted() {
        axios.get('https://api.unsplash.com/photos/?client_id=secret')
        .then(response => {
            this.images = response.data;
        })
        .catch((error) => console.log(error));
    }
}