Почему изменения в data запаздывают?

Question

[MikUrrey]

Приветствую.
Суть: имеется массив данных, под которые циклом выводится ряд кастомных чекбоксов.
Чтобы сделать к ним некое подобие label, добавляю
Но почему-то в данные изменение попадает только после nextTick'а (т.е. когда что-то побуждает родительский компонент перерисоваться). Как так, в какую сторону копнуть?

<template>
<div v-for="(day, key) in $options._weekDays" :key="key">
    <v-simple-checkbox v-model="innerValue[key][0]"></v-simple-checkbox>
    <div @click="innerValue[key][0] = !innerValue[key][0]">{{day}}</div>
</div>
</template>
<script>
export default {
    _weekDays: {
        monday: "Понедельник",
        tuesday: "Вторник",
        wednesday: "Среда",
        thursday: "Четверг",
        friday: "Пятница",
        saturday: "Суббота",
        sunday: "Воскресенье",
    },
    data() {
        return {
            innerValue: {
                monday:    [false, "", ""],
                tuesday:   [false, "", ""],
                wednesday: [false, "", ""],
                thursday:  [false, "", ""],
                friday:    [false, "", ""],
                saturday:  [false, "", ""],
                sunday:    [false, "", ""],
            },
        }
    },
}
</script>

Answer 1

[0xD34F]

почему-то в данные изменение попадает только после nextTick'а (т.е. когда что-то побуждает родительский компонент перерисоваться)

Да ну? А как вы это проверяли? По внешнему виду компонента? Вдруг обновление данных всё-таки происходит, а вот связанный с ним (обновлением) последующий рендеринг компонента - нет? Такое бывает.

Comments

[MikUrrey]

Блин. В который раз на это попадаюсь, стыдно) Спасибо!

Да ну? А как вы это проверяли? По внешнему виду компонента?

1) Открываем VUE dev tools, находим нужный компонент, раскрываем data.
2) Кликаем. Молчок.
3) Закрываем диалог, и наблюдаем, как в растворяющемся благодаря анимации блоке чекбоксы сами собой отмечаются и data в dev tools чудесным образом прописывается.