Show Hide Vuejs Element - vue.js

Question

hello, I have a dilemma, trying to show and hide content from a list
I have an object in data
{
types : {
key_1 : { code: 'code_1', text: 'hello 1', show: false },
key_2 : { code: 'code_2', text: 'hello 2', show: false },
key_3 : { code: 'code_3', text: 'hello 3', show: false },
key_4 : { code: 'code_4', text: 'hello 4', show: false },
key_5 : { code: 'code_5', text: 'hello 5', show: false },
}
}
and another in localStorage
[
{ key_6 : { code: 'code_6', text: 'hello 6', show: false } },
{ key_7 : { code: 'code_7', text: 'hello 7', show: false } },
{ key_8 : { code: 'code_8', text: 'hello 8', show: false } },
{ key_9 : { code: 'code_9', text: 'hello 9', show: false } },
]
in created
created: function(){
let datas = JSON.parse(window.localStorage.getItem('types'));
datas.forEach( o => {
this.types[o.code] = {
text : o.text,
show : false,
};
});
},
it works fine this.types, there are both lists
now there's an HTML
<ul>
<li v-for="(v,k) in types" :key="k">
<a #click="opClo(k)">
<span>{{v.text}}</span>
</a>
<ol v-show="v.show">
<li>hello</li>
</ol>
</li>
</ul>
in methods
opClo : function( key ){
this.types[key].show = !this.types[key].show;
},
opClo would have to show or hide the ol, but it fails, it only opens the data, the challenge doesn't open them, how can this problem be solved?

Answer 1

for the record if someone else has the same problem,
the datas.forEach loop when assigning data directly to the object, it is to use $set
this.$set(this.types, key, item)
This was the problem.
Anyway, I think the problem is that because you are adding the items from localStorage after the this.type property is created, the newly added items are not reactive.
see https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats