Alilgroup
@Alilgroup
Инженер

Почему хук created срабатывает, но значение параметра в data не меняется?

Ребята, привет.
Имеется два компонента, Container и дочерний.

В контейнере дочерний компонент создается через v-for
<graph-category v-for="(value, key, index) in kpi" :kpi="value" :title="key" :key="index"/>


Дочерний компонент приведу полностью
<template>
    <div>
        <div class="row mb-1">
            <span class="badge badge-secondary col">{{title}}</span>
            <button v-if="shown" @click="setHiddenState(false)"
                    class="col-auto btn btn-primary badge badge-primary ml-1">Свернуть
            </button>
            <button v-if="!shown" @click="setHiddenState(true)"
                    class="col-auto btn btn-primary badge badge-primary ml-1">Развернуть
            </button>
        </div>
        <div v-show="shown" class="row mb-4">
            <line-container v-for="(item, itemIndex) in kpi" :key="itemIndex" :list="cellsList"
                            :interval="daysInterval"
                            :title="item.title" :db-columns="item.column" :units="item.unit"/>
        </div>
    </div>
</template>

<script>
    import LineContainer from "./graphs/LineConteiner";

    export default {
        name: 'GraphCategory',
        components: {
            LineContainer
        },
        data() {
            return {
                shown: true
            }
        },
        props: {
            title: String,
            cellsList: Array,
            daysInterval: Number,
            kpi: Array
        },
        watch: {
            shown() {
                console.log("shown changed " + this.shown);
            }
        },
        mounted() {
            this.getHiddenState();
            console.log(this.title + " shown is " + this.shown);
        },
        methods: {
            setHiddenState(value) {
                console.log("setHiddenState " + value);
                this.$cookies.set(this.title, value, '7d', '/', '', false, '');
                this.shown = value;
            },
            getHiddenState() {
                if (this.$cookies.isKey(this.title)) {
                    let result = this.$cookies.get(this.title);
                    console.log("getHiddenState "+this.title+": " + result);
                    this.shown = result;
                }
            },
        }
    }
</script>
<style scoped>

</style>

В дочернем компоненте есть простейший переключатель в виде двух кнопок, переключающие состояния Свернут/Развернут и запоминающий это в куках.

Значения в куки записываются, считываются, при нажатии на кнопку Свернуть компонент сворачивается, при нажатии Развернуть разворачивается, но при обновлении страницы хук mounted (ровно как и created и beforeMount) срабатывает, значение shown из кук считывается верно, но v-if и v-show не срабатывают, хотя судя по диаграмме реактивность уже должна работать. Что я упускаю?
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Сохраняете true/false, а читаете 'true'/'false'. В куках же строки хранятся. А булевым эквивалентом любой непустой строки является true. Поэтому результат работы v-if/v-show одинаков, вне зависимости от прочитанного значения.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы