Почему не срабатывает computed свойство?

Question

[Владимир Обабков]

Здравствуйте

Код

https://codepen.io/Enroller/pen/qBWMLqK

Контекст проблемы :
Пишу небольшую форму с валидацией и прогресс баром чисто чтобы раскурить Vue
Проблема возникает, когда я пытаюсь использовать computed для вычисления количества верифицированных полей и расчёта ширины скроллбара.
Он не срабатывает.
Насколько я понимаю, я читаю реактивные данные, когда иду по

массиву

this.form.forEach((item)=>{
              if(!item.valid){
                  complete++;
              }
           });

т,е геттер я таки вызываю.. Но видимо я понимаю не правильно
Пишу просто подтягивая Vue и без компонентов, так что заранее извиняюсь читать может быть тяжело

UPD: Кратко суть проблемы из комментариев:
Я доклеивал поля в dataхуком beforeMount. Реактивность же инициализируется намного раньше.
Для этого стоит использовать beforeCreate

Answer 1

[Михаил]

valid: false к каждому в form[]
и if(!item.valid){ знаком не ошиблись?


form.valid вы не ставите свойство реактивным, так что надо изначально его ставить в data

Comments

[Владимир Обабков]

Знаком ошибся, пробовал всякое и недооткатил
Но допустим form.value вполне себе реактивен.. Находится там-же..
UPD И правда после склеивания они не реактивны.. А почему так происходит не подскажете ?

[Михаил]

Владимир Обабков, value да, valid нет

[Владимир Обабков]

Михаил, Посмотрел жизненный цикл.. Реактивность инициализируется гораздо раньше чем beforeMount...
Именно поэтому доклеенные поля не реактивны ?

[Михаил]

Владимир Обабков, object.assign ничего не знает про реактивность
https://vuejs.org/v2/api/#Vue-set
https://vuejs.org/v2/guide/reactivity.html

[Михаил]

Владимир Обабков, beforeCreate тогда уж

[Владимир Обабков]

Михаил, Глупая ошибка.. Надо было раньше жизненный цикл почитать..
Спасибо большое что пояснили

[Виталий Мосин]

Восстановить реактивность можно с помощью Vue.set. Хотя с версии 2.6 обещали что вью сможет отслеживать изменения в массива и объектах. Так как перешли на прокси.

[Владимир Обабков]

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

Answer 2

[Андрей Ололощенко]

Попробуйте использовать this.$set(object, 'newPropName', value) и будет норм.