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

，另一个在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 } },
]

已创建

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

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

显示Hide Vuejs元素

1 个答案: