@alenov
Программист

Vue.js: почему Vue не видит обновлённые реактивные данные?

Новичок в Vue, и во фронэнде тоже. Прошу объяснить, что не так в динамической подгрузке данных в форму редактирования (SPA-приложение).
Исходные данные такие. Есть список работников, основные данные которых уже как-то загружены. Юзер кликает по элементу списка, и данные работника переносятся в форму редактирования, которая затем активизируется через v-if. Всё красиво. Но есть данные этого работника, которые изначально не загружаются: их нужно подгрузить в форму только когда его выбрали.
Делаю так. В момент переноса основных данных в форму делаю запрос на сервер и получаю данные. Схематично:

this.fill_userdata(user_id);
if (this.form.some_field == undefined) {
    axios.post(...)
        .then(response => {
          this.form.some_field = response.data;
        })
}
this.form_enabled = true;


Запрос, понятно, асинхронный, и когда выполняется this.form.some_field = response.data, форма уже отрисовалась. И тут засада: поле с запрошенными с сервера данными пустое! Проблема в том, что Vue почему-то не обновляет это поле, хотя его источник (model) изменился. Дальше ещё интереснее: достаточно изменить любое из прочих полей этой формы, и Vue тут же просыпается и обновляет some_field.

Как это красиво победить? Может, нужен принципиально другой подход к решению такой задачи? Какой?
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
@kirill-93
У вас изначально это поле не объявлено, поэтому Vue не может отследить его изменение.
Используйте
Vue.set(this.form, 'some_field', response.data);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы