v-on:click 在子组件中不起作用

Question

首先我是 vue.js 的新手。

当用户单击 item-preview 组件中的扩展锚标记时，我正在尝试做什么，item-details 将显示并且 item-preview 将被隐藏。现在，当显示项目预览并且我试图通过单击其自己的扩展器锚标记来切换它时，就会出现问题。我不知道这有什么问题。

这是我的 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 = false 中使用entry.hide = true。这解决了我的问题。