Когда я устанавливаю ответ axios в vue js, я получаю пустой массив в лезвии 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

У вас не может быть следующей строки кода, она сломается.

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

Answer 2

Причина, по которой ваши данные не добавляются в экземпляр Vue, заключается в том, что this не будет ссылаться на экземпляр Vue внутри closure (традиционный function () {}). Пожалуйста, посмотрите на эту статью для получения дополнительной информации о scope и this ключевых слов в javascript.

Ниже я немного ссылаюсь на ES, что означает ECMAScript. Вот статья , показывающая разницу между ней и ванильным JavaScript.

Я вижу из вашего поста, что вы используете синтаксис ES6 / ES2015 для определения методов, так что я предполагаю, что вы довольны просто использованием современных браузеров.

Если это так, то вы можете использовать Функции стрелок , чтобы обойти проблему с областью действия:

.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 , поэтому измените mounted(){ на mounted: function () {.

---

Наконец, если вы хотите использовать современный / новый javascript, например, ES6 / ES2015 и выше, но если ваш код работает согласованно со старыми браузерами, тогда я бы предложил использовать что-то вроде Laravel mix для компиляции вашего javascript для вас.

Документация по Laravel Mix Серия учебных пособий по Laravel Mix