Показать Скрыть элемент Vuejs - PullRequest
Новая
       68

Показать Скрыть элемент Vuejs

1 голос
/ 10 октября 2019

привет, у меня дилемма, я пытаюсь показать и скрыть содержимое из списка

У меня есть объект в данных 

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

это отлично работает 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, вызов не открывается, как решить эту проблему?

1 Ответ

0 голосов
/ 11 октября 2019

для записи, если у кого-то еще есть такая же проблема,

цикл datas.forEach при назначении данных непосредственно object, он должен использовать $set

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

Это была проблема.

В любом случае, я думаю, что проблема в том, что вы добавляете элементы из localStorage после того, как свойство this.typeсозданы, новые добавленные элементы не являются реактивными.

см. https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

...