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事件，即使单击了它的任何子元素也是如此。

这是功能check（event）

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

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

Answer 1

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