Question

当我记录响应时，我试图在页面中显示结果。我可以看到响应，我尝试将响应传递给vue js数据，但是每次它显示一个空数组

     var app = new Vue({
        el: '#app',
        data: {
            results: []
        },
        mounted(){
            var url = "{{ url('fetch/messages') }}";
            axios.get(url)
                .then(function (response) {
                    console.log(response.data);
                    this.results = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }

我正在尝试在页面@{{ results }}中显示响应

Answer 1

未将数据添加到Vue实例的原因是因为this不会引用closure（传统function () {}）内的Vue实例。请查看this article，以获取有关JavaScript中scope和this关键字的更多信息。

在下文中，我指的是ES，代表ECMAScript。这是article，以显示两者之间的区别是普通javascript。

我从您的帖子中看到，您正在使用ES6 / ES2015语法作为方法定义，所以我假设您现在对仅使用现代浏览器感到满意。

如果是这种情况，那么您可以使用Arrow Functions来解决范围问题：

.then(response => {
    console.log(response.data);
    this.results = response.data;
})

如果没有，则如上文scope文章所述，您需要将this分配给变量：

var self = this;

axios.get(url)
    .then(function (response) {
        console.log(response.data);
        self.results = response.data;
    });

如果是这种情况，那么我也建议不要使用ES6 method definitions，因此将mounted(){更改为mounted: function () {。

最后，如果您希望能够使用现代/新的javascript，例如ES6 / ES2015及更高版本，但是如果您希望代码与旧版浏览器保持一致，那么我建议您使用Laravel mix之类的代码来为您编译JavaScript。

Laravel Mix Documentation Laravel Mix tutorial series

Answer 2

您不能具有以下代码行，它将中断。

            var url = "{{ url('fetch/messages') }}";

当我在vue js中设置axios响应时，我在laravel刀片中得到一个空数组

2 个答案: