Vue js点击获取html5属性

我正在做一个使用 vuejs 最新版本的项目。在这个项目中，我想在点击事件上获取与 vue 关联的 html5 属性。

我的按钮代码是

<a href="javascript:" class="btn btn-info btn-xs" @click="editModal" data_id="{{$staff->id}}">
  <i class="fa fa-pencil"></i>
</a>

我的js是

var staffModal = new Vue({
el: '#app',
methods: {
    editModal: function(){
        console.log(this.data_id);
    }
}});

In my console I get undefined。如何获得正确的价值。

鼠标事件 https://developer.mozilla.org/en-US/docs/Web/Events/click实例作为第一个参数传递给单击事件处理程序。使用getAttribute访问属性的函数。MouseEvent.target将指向<i> and MouseEvent.currentTarget to <a>（事件侦听器附加到的元素）。 将 editModal 方法更改为：

editModal: function(e) {
    console.log(e.currentTarget.getAttribute('data_id'));
}

顺便说一句：使用 - （破折号）而不是 _ （下划线）来创建数据属性：正确的是data-id not data_id