Show Hide Vuejs元素

Question

你好，我有一个难题，试图显示和隐藏列表中的内容

我在数据中有一个对象

{
     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 },
    }
}

和本地存储中的另一个

[
      { 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 } },
]

已创建

created: function(){
    let datas = JSON.parse(window.localStorage.getItem('types'));
     datas.forEach( o => {
         this.types[o.code] = {
             text    : o.text,
             show : false,
         };
    });
},

此this.types很好用，有两个列表现在有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>                            

在方法中

    opClo : function( key ){
        this.types[key].show = !this.types[key].show;
    },

opClo必须显示或隐藏ol，但是它失败了，它只打开了data，挑战没有打开它们，如何解决这个问题？

Answer 1

用于记录是否有其他人遇到相同的问题，

将数据直接分配给datas.forEach时使用object的$set循环

this.$set(this.types, key, item)

这是问题。

无论如何，我认为问题在于，因为在创建this.type属性之后，您是从localStorage添加项目的，所以新添加的项目是无反应的。

请参见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats