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

Posted 2023-02-23

【中文标题】v-on:click 在子组件中不起作用

【英文标题】：v-on:click not working in a child component

【发布时间】：2016-08-15 13:08:56

【问题描述】：

首先我是 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);
            );
        ,

    

);

【问题讨论】：

`entry.hide = !!entry.hide;`应该只有一个!

【参考方案1】：

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

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

【讨论】：

entry.hide = !!entry.hide; 不执行任何操作...entry.hide = !entry.hide 将切换值。