Почему массив инициализируется с сервера в методе mount, но не выводится при помощи директивы v-for?

Question

[Xveeder]

День добрый.

В приложении следующая разметка:

<div id="app">

    <ul>
        <li v-for="i in info">
            {{ i.title }}
        </li>
    </ul>
</div>

Код VUE:

new Vue({
        el: '#app',
        data() {
            return {
                info: null
            };
        },
        mounted() {
            axios({
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: 'http://local/get-item',
            }).then(function (response) {
                this.info = response.data;
            });
        }

При запуске страницы ничего не происходит.

На сервере ради теста массив генерится следующим образом:

$lessons[0] = [
        'title' => 'Описание 1',
        'description' => 'Заголовок 1',
    ];

    $lessons[1] = [
        'title' => 'Описание 2',
        'description' => 'Заголовок 2',
    ];

    echo json_encode($lessons);

На фронт приходит в таком виде:

Answer 1

[0xD34F]

Контекст потеряли, this при обработке ответа - вовсе не экземпляр vue.

Используйте стрелочные функции - замените function (response) { на (response) => {.

Или используйте bind:

axios(...).then(function(response) {
  this.info = response.data;
}.bind(this));

Или перед запросом сохраняйте контекст в отдельную переменную, и работайте в коллбеке с ней вместо this:

const that = this;
axios(...).then(function(response) {
  that.info = response.data;
});

Или вынесите код коллбека в отдельный метод - vue сам привяжет контекст:

methods: {
  processResponse({ data }) {
    this.info = data;
  },
},
mounted() {
  axios(...).then(this.processResponse);
},

Или используйте async-await:

async mounted() {
  try {
    this.info = (await axios(...)).data;
  } catch (e) {}
},

Comments

[Xveeder]

Спасибо вам, большое человеческое! Я с JS не очень дружу, под проект пригодилось. Правильно я понимаю, я здесь нарушил именно конструкцию JS а не VUE?

Хотя в сущности, что тот, что этот случай - всего лишь коллбэки, только второй стрелочный. Каким образом я смог вернуть контекст?

[0xD34F]

Xveeder, понимаете правильно. Про "вернуть контекст" можете прочесть здесь.