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

Question

我在我的 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 将成为按钮。相反，图标本身就是我的代码失败的原因。

Answer 1

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