Как работает этот код?

Question

[r_g_b_a]

Здравствуйте.
Есть два практически идентичных примера:
Первый
Второй
Разница только в том, что во втором примере объекты todos имеют свойство calc с начальным значением. Когда я отмечаю чекбокс, то справа сразу же выводится рассчитанное значение.
Почему в первом примере после установки чекбокса сначала появляются пустые скобки, а значение выводится только после выбора следующего пункта?

Comments

[Kutuzov_ska]

Скажите, а где вы взяли этот код? Достаточно важно для уточнения

[Kutuzov_ska]

То есть вероятнее всего проблема не в data, а в computed. Я могу ошибаться, но так делать нельзя. В computed крайне не рекомендуется модифицировать данные из data.

[r_g_b_a]

Сам написал. Я только изучаю vue и наткнулся на такое не понятное для меня поведение.
В документации указано, что vue не может обнаружить добавление или удаление свойства.
Мне кажется, что в моем примере свойства не реактивные, именно поэтому они обрабатываются только после второго вызова моей функции. В этом причина?

Answer 1

[Kutuzov_ska]

Внимание! Так делать нельзя и небезопасно, но для пояснения можно.
В computed - нельзя модифицировать данные из data.

Вот вариант с полным присвоением


Ваша ошибка вероятно кроется в понимании реактивности.
Если почитаете документацию, там если не ошибаюсь будет пункт о том, как она работает.
https://ru.vuejs.org/v2/guide/reactivity.html
Например в объектах надо вызывать this.$set... у массивов отслеживаются push, pop... и т.д.

То есть изменение

a=1;
a=2;

Vue видит правильно. А вот:

a = {};
a= {lol:"kek"}

Уже могут быть проблемы.

При каждом нажатии на чекбокс, вью пробегает по массиву todos.
В момент самого первого нажатия он понимает что для массива todos, например объекту 1 вы добавили свойство calc, но значение он не зафикисровал.

Когда вы кликаете на 2 чекбокс, он опять проходить ВЕСЬ массив, и Vue повторно проверяет calc у 1 и уже тогда понимает что значение у него изменилось (calc то уже существует), а у второго он опять его только создает.

Comments

[Kutuzov_ska]

Ну и дополню, раз только начинаете как бы сделал я.
То есть добавьте свойство checked... теперь мы понимаем что объект в todos может быть нажат или выбран.

Добавьте отдельно в methods функцию calculateValue -> отдельная нужна для того чтобы использовать ее в html + если логика изменится, например val окажется строкой, если данные пришли с сервера, и проверку можно будет сделать внутри.

В итоге computed считает только total, все получается логичненько:)

[r_g_b_a]

Kutuzov_ska, огромное спасибо за такой развернутый ответ!