Как следить за состоянием множества на странице?

Question

[Александр Фадеев]

Доброго времени дня, делаю блок фильтров товаров на сайте, который представляет набор полей с разными именами и значениями. в среднем на странице будет 3-5 фильтров. столкнулся с проблемой отслеживания состояния всех этих элементов как единого целого. Пробовал указывать v-model="filter['name']" и вешать вотчер на filter, но этот вотчер срабатывает только при изменение ключей массива, но не значений. На изменение значений не реагирует.

Как проще следить за состоянием набора полей фильтров, для последующего обновления страницы товара?

Answer 1

[0xD34F]

Пробовал указывать v-model="filter['name']" и вешать вотчер на filter, но этот вотчер срабатывает только при изменение ключей массива, но не значений. На изменение значений не реагирует.

По умолчанию изменения свойств объектов не отслеживаются.
Для этого надо указать deep: true в настройках watcher'а:

watch: {
  filters: {
    deep: true,
    handler(val) {
      console.log(JSON.stringify(val, null, 2));
    },
  },
},

Comments

[Александр Фадеев]

Спасибо большое, работает)) я уже боялся, что прийдётся v-on="change" вешать везде, мне это решение казалось костылём.

[0xD34F]

Честно говоря, мне и моё решение кажется костылём.

UPD. Ну да, тоже костыль. Обновил ответ на нормальный.