Vue js点击获取html5属性

Question

我正在使用 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);
    }
}});

在我的控制台中，我未定义。如何获得正确的价值。

原文由 Iftakharul Alam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

MouseEvent 实例作为第一个参数传递给单击事件处理程序。使用 getAttribute 函数访问属性。 MouseEvent.target will point to <i> and MouseEvent.currentTarget to <a> (element that the event listener is attached to).将您的 editModal 方法更改为：

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

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

原文由 ndpu 发布，翻译遵循 CC BY-SA 3.0 许可协议