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

Question

[sinneren]

Есть такой объект в 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) { ... }` невалидна. Так как это сделать правильно?

Answer 1

[sinneren]

watch: {
            obj_lev_1: {
                deep: true,
                handler(data) {
                    if (data.obj_lev2.need_watch) {
                        ...
                    } else if (data.obj_lev2_2.need_watch) {
                        ...
                    }
                },
            },
        },

нашёл такой способ, но может есть лучше?

Comments

[Sergei Iamskoi]

Есть. Надо писать путь к вложенному свойству в кавычках:

watch: {
'obj_lev1.obj_lev2.need_watch': function (old, new) { ... }
}

Answer 2

[0xD34F]

Сделать вычисляемое свойство, содержащее в себе все 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).