Серия VueJS, часть 3 — реактивность
tl;dr
Прочтите: Vuejs.org — Reactivity in Depth
Используйте Vue devtools и проверьте, есть ли у вашего атрибута/переменной get/set
Мне повезло работать в компании, которая использует новые технологии в своих проектах. Это одна из двух основных причин, почему я использую VueJS сегодня. Вторая причина в основном в том, что автор фреймворка PHP Laravel сказал, что это круто (смеется).
Сегодня я потратил около двух часов на то, чтобы понять, почему один атрибут одного объекта не имеет реактивности. Сценарий был такой:
new Vue({ /* ... */ ready() { // *1 - setting the procedure array this.procedures = $.data(document.body,'procedures'); // *2 - updating element in array this.procedures = this.procedures.map((el) => { proc.select = false; }); } });
Поскольку я добавил атрибут select (*2) к каждому объекту массива процедур, после(*1) массив процедур устанавливается , VueJS не будет добавлять Observer в эту переменную! В этом конкретном случае $set не будет работать.
Чтобы решить эту проблему, все, что мне нужно было, это:
- Прочтите эту статью о реактивности в деталях на VueJS;
- Когда я понял, как это работает, я понял (используя Vue devtools), что к атрибуту select не привязаны какие-либо методы get/set (правда, не Oberver!).
Решение было:
new Vue({ ... ready() { // *1 - set the procedures array with "select's" attr! this.procedures = $.data(document.body,'procedures').map( (el) => proc.select = false ); } });
Все, что мне нужно было сделать, это сначала присвоить массиву процедур ожидаемый объект.