Ребята, привет.
Имеется два компонента, 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 не срабатывают, хотя судя по диаграмме реактивность уже должна работать. Что я упускаю?
Средний
