v-on: нажмите, не работая в дочернем компоненте

Question

Прежде всего, я новичок в vue.js.

то, что я пытаюсь сделать, когда пользователь нажимает на тег привязки экспандера в компоненте предварительного просмотра элемента, будет отображаться информация о деталях, а элемент-превью будет скрыт. Теперь проблема возникает, когда отображается элемент-превью, и я пытаюсь переключить его, щелкнув собственный тег привязки экспандера. Я не ошибаюсь в этом.

Это мои HTML-шаблоны.

<script type="text/x-template" id="grid"> 
    <div class="model item" v-for="entry in data"> 
     <item-preview v-bind:entry="entry" v-if="entry.hide == 0"> 
     </item-preview> 
     <item-details v-bind:entry="entry" v-if="entry.hide == 1"> 
     </item-details> 
    </div> 
</script> 

<script type="text/x-template" id="item-preview"> 
     <header class="preview"> 
      <a class="expander" tabindex="-1" v-on:click="toggle(entry)"></a> 
      <span class="name rds_markup"> 
       {{ entry.name }} 
      </span> 
     </header> 
</script> 


<script type="text/x-template" id="item-details"> 
    <div class="edit details"> 
     <section class="edit" tabindex="-1"> 
      <form action="#"> 
       <fieldset class="item name"> 
        <a class="expander" v-on:click="toggle(entry)"></a> 
        {{ entry.name }} 
       </fieldset> 
      </form> 
     </section> 
    </div> 
</script> 

И вот как я назвал элемент сетки на моем представлении.

<grid 
    :data="packages"> 
</grid> 

И для моей реализации Вью

var itemPreview = Vue.component('item-preview',{ 
    'template':"#item-preview", 
    'props':{ 
     entry:Object 
    }, 
    methods:{ 
     toggle:function(entry){ 
      entry.hide = !!entry.hide; 
      return true; 
     } 
    } 
}); 

var itemDetails = Vue.component('item-details',{ 
    'template':"#item-details", 
    'props':{ 
     entry:Object 
    }, 
    methods:{ 
     toggle:function(entry){ 
      entry.hide = !!entry.hide; 
      return true; 
     } 
    } 
}); 

var grid = Vue.component('grid',{ 
    'template':"#grid", 
    'props':{ 
     data:Array, 
    }, 
    components:{ 
     'item-preview': itemPreview, 
     'item-details': itemDetails 
    }, 
    methods:{ 
     toggle:function(entry){ 
      entry.hide = !!entry.hide; 
      return true; 
     } 
    } 
}); 




var vm = new Vue({ 
    el:'#app', 
    data:{ 
     message:'Hello', 
     packages:{} 
    }, 

    ready:function(){ 
     this.fetchPackages(); 
    }, 

    methods:{ 
     fetchPackages:function(){ 
      this.$http.get(url1,function(response){ 
       this.$set('packages',response); 
      }); 
     }, 

    } 

}); 

Answer 1

Silly меня. Мне понадобилось 30 минут, чтобы выяснить, что не так с этим кодом.

Что я сделал, чтобы исправить это, а не entry.hide = !!entry.hide; Я использую entry.hide = true в компоненте item-preview и в деталях-деталях entry.hide = false. это исправить мою проблему.