Серия 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
            );
    }
});

Все, что мне нужно было сделать, это сначала присвоить массиву процедур ожидаемый объект.