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> 

而对于我的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

愚蠢的我。我花了30分钟才弄清楚这段代码有什么问题。

我做了什么来解决这个问题，而不是entry.hide = !!entry.hide;我使用entry.hide = true在项目预览组件和项目详细信息entry.hide = false。这解决了我的问题。