Vue js on click get html5 attribute

Question

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

my button code is

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

and my js is

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.

Answer 1

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'));
}

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