javascript - Vue JS单击获取HTML5属性

我正在使用vuejs最新版本进行项目。在这个项目中，我想获得与click事件相关联的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);
    }
}});

在我的控制台中，我不确定。如何获得正确的值(value)。

最佳答案

MouseEvent实例作为第一个参数传递给click事件处理程序。使用getAttribute函数访问属性。 MouseEvent.target将指向<i>，而MouseEvent.currentTarget将指向<a>(事件侦听器所附加的元素)。
将您的editModal方法更改为:

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

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

关于javascript - Vue JS单击获取HTML5属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44324869/