vue.js - 关于vue methods 的 this

问题描述

问 题

刚学vue ，好多不习惯啊 @____@

<a data-a="你没有权限点击" id="d1"><span>按钮</span><b>1</b></a>

document.getElementById('d1').onclick = function () {
    alert(this.dataset.a);
    return false;
}

平时原生js，click事件this指向的是a标签，

但用vue后

<div id="example">
    <a data-a="你没有权限点击" @click.prevent="link($event)"><span>按钮</span><b>1</b></a>
</div>

new Vue({
    el: '#example',
    data: data,
    methods: {
        link: function (event) {
            alert(this.dataset.a)
        }
    }
})

vue事件的this是指向vue实例，这时如果我想获取a表情的data-a怎么获取，尝试过用event.target,但event.target只能获取到a标签里面的span或b，还要向上获取父级这种方法感觉不太现实=。=

求较，vue的思维我有点扭不过来啊！！！ (ノд・。)

解决方案

event.currentTarget.dataset.a

这篇关于vue.js - 关于vue methods 的 this的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！