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

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实例。有关jaz中的this article和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') }}";