v-on：在 bootstrap-vue 中单击内容时单击按钮不工作

Posted 2023-02-22

【中文标题】v-on：在 bootstrap-vue 中单击内容时单击按钮不工作

【英文标题】：v-on:click not working on button when clicking it's content in bootstrap-vue

【发布时间】：2020-07-01 10:48:11

【问题描述】：

我在我的 vue 组件中创建了以下模板

                <b-button v-on:click="check($event)" class="btn btn-success" data-action="consent">
                    <b-icon-check></b-icon-check>
                </b-button>

但是，单击事件似乎仅在我单击按钮本身时才起作用，例如在图标周围的侧面，而不是在单击图标本身时。

我想知道是否有更好的方法来完成我想要实现的目标，而不是添加另一个 v-on:click 图标本身。

基本上我希望按钮触发点击事件，即使它的任何子元素被点击。

这里是函数检查（事件）

    methods:
        check(event)
            let action = event.target.getAttribute('data-action');
            if(action === 'consent')
                this.checked = true;
            
            else
                this.checked = false;
            
        
    ,

阅读 cmets 和修饰符链接后，我认为我的错误是假设 event.target 将成为按钮。相反，图标本身就是我的代码失败的原因。

【问题讨论】：

好像有什么东西阻止了图标冒泡到按钮，你能分享check方法的代码吗？

测试v-on的修饰符：vuejs.org/v2/guide/events.html#Event-Modifiers

我刚刚更新了问题，因为我认为该事件实际上正在触发但不起作用，因为我正在处理错误的 event.target。但我想知道为什么它也不会传播到按钮。

我测试了你的代码，点击图标确实触发了事件

您错过了data-action 的图标失败event.target.getAttribute('data-action') 将data-action="consent" 添加到<b-icon-check></b-icon-check>

【参考方案1】：

使用event.currentTarget.getAttribute('data-action') 从绑定事件侦听器的位置获取data* 属性。 event.currentTarget 将始终是事件侦听器绑定到的元素（而不是实际启动 click 事件的元素，这是 event.target 指向的元素）。

【讨论】：

我一定会尝试并回复你:)

是的，它是完美的。这就是我所需要的，非常感谢你