sinneren
@sinneren

Как отследить изменение во вложенном объекте data в vue2?

Есть такой объект в data:
...
{
   ...
    obj_lev_1: {
        obj_lev2: {
            need_watch: true,
        }
        obj_lev2_2: {
           need_watch: true,
        }
    },
    ...
}
...


Мне нужно отследить изменения (watch), в свойствах need_watch, каждого объекта.
Если пытаться следить за obj_lev_1, то ничего не выйдет. А запись `obj_lev1.obj_lev2.need_watch: function (old, new) { ... }` невалидна. Так как это сделать правильно?
  • Вопрос задан
  • 2742 просмотра
Решения вопроса 2
sinneren
@sinneren Автор вопроса
watch: {
            obj_lev_1: {
                deep: true,
                handler(data) {
                    if (data.obj_lev2.need_watch) {
                        ...
                    } else if (data.obj_lev2_2.need_watch) {
                        ...
                    }
                },
            },
        },


нашёл такой способ, но может есть лучше?
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
Сделать вычисляемое свойство, содержащее в себе все need_watch:

computed: {
  needWatch() {
    return Object.fromEntries(Object.entries(this.obj_lev_1).map(n => [ n[0], n[1].need_watch ]));
  },
},

И следить за ним:

watch: {
  needWatch(newVal, oldVal) {
    const [ k, v ] = Object.entries(newVal).find(n => n[1] !== oldVal[n[0]]);
    alert(`${k}.need_watch changed from ${oldVal[k]} to ${v}`);
  },
},

Или, сделать компонент, который будет получать вложенные объекты или их need_watch в качестве параметра. Создавать новое значение внутри и отправлять его наверх (v-model/sync). Подписаться в родителе на соответствующее событие (вместо использования watch).
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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