Я пытаюсь отобразить результаты на своей странице, когда регистрирую ответ. Я вижу ответ, я пытался передать ответ на данные vue js, но каждый раз он отображает пустой массив
var app = new Vue({
el: '#app',
data: {
results: []
},
mounted(){
var url = "{{ url('fetch/messages') }}";
axios.get(url)
.then(function (response) {
console.info(response.data);
this.results = response.data;
})
.catch(function (error) {
console.info(error);
});
}
Пытаюсь отобразить ответ на странице @{{ results }}
Я пробовал, он по-прежнему возвращает пустой массив
Вы пытаетесь отобразить результаты в шаблоне vue или шаблоне лезвия? Вы не можете обновить шаблон лезвия после того, как он был отрисован таким образом.
Я пытаюсь отобразить в шаблоне лезвия
Причина, по которой ваши данные не добавляются в экземпляр Vue, заключается в том, что this
не будет ссылаться на экземпляр Vue внутри closure
(традиционный function () {}
). Пожалуйста, посмотрите эта статья для получения дополнительной информации о ключевых словах scope
и this
в javascript.
Ниже я немного ссылаюсь на ES
, что означает ECMAScript
. Вот статья, чтобы показать разницу между ним и ванильным javascript.
Из вашего сообщения я вижу, что вы используете синтаксис ES6 / ES2015 для определений своих методов, поэтому я предполагаю, что вы довольны тем, что сейчас используете только современные браузеры.
В этом случае вы можете использовать Стрелочные функции, чтобы обойти проблему с областью действия:
.then(response => {
console.info(response.data);
this.results = response.data;
})
Если нет, то, как упоминалось в статье scope
выше, вам нужно будет назначить this
переменной:
var self = this;
axios.get(url)
.then(function (response) {
console.info(response.data);
self.results = response.data;
});
Если это так, то я бы также посоветовал не использовать ES6 определения методов, поэтому замените mounted(){
на mounted: function () {
.
Наконец, если вы хотите использовать современный / новый javascript, например. ES6 / ES2015 и выше, но чтобы ваш код работал согласованно со старыми браузерами, я бы предложил использовать что-то вроде Laravel mix
для компиляции вашего javascript за вас.
У вас не может быть следующей строки кода, она сломается.
var url = "{{ url('fetch/messages') }}";
попробуй использовать
.then(response => {