Vue js 点击获取 html5 属性 [英] Vue js on click get html5 attribute

问题描述

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

I am doing a project using vuejs latest version. In this project I want to get html5 attribute associating vue on click event.

我的按钮代码是

<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. How to get right value.

推荐答案

MouseEvent 实例作为第一个参数传递给单击事件处理程序.使用 getAttribute 函数访问属性.MouseEvent.target 将指向 和 MouseEvent.currentTarget 到 (元素事件侦听器附加到).将您的 editModal 方法更改为:

MouseEvent instance is passed as 1st parameter to click event handler. Use getAttribute function to access attribute. MouseEvent.target will point to <i> and MouseEvent.currentTarget to <a> (element that the event listener is attached to). Change your editModal method to:

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

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

BTW: use - (dash) not _ (underscore) to create data attributes: correct is data-id not data_id

这篇关于Vue js 点击获取 html5 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！