v-on: cliquez ne fonctionne pas dans un composant enfant

Question

Première chose d'abord, je suis nouveau sur vue.js. Ce que j'essaie de faire lorsque l'utilisateur clique sur la balise d'ancrage de l'expanseur dans le composant d'aperçu d'élément, les détails de l'élément s'affichent et l'aperçu de l'élément est masqué. Maintenant, le problème se produit lorsque l'aperçu de l'élément s'affiche et que j'essaie de le basculer en cliquant sur sa propre balise d'ancrage expander. Je ne sais pas ce qui ne va pas avec ça.

Voici mes modèles 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> 

Et voici comment j'ai appelé le composant de grille sur ma vue.

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

Et pour ma mise en œuvre de Vue

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

me Silly. Il m'a fallu 30 minutes pour comprendre ce qui ne va pas avec ce code. Ce que j'ai fait pour corriger ceci est au lieu de entry.hide = !!entry.hide; J'utilise entry.hide = true dans le composant de prévisualisation d'élément et dans les détails d'article entry.hide = false. Cela corrige mon problème.