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.

ndpu · Answer 1 · 2017-06-02T11:30:21.127

28

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

edited Jun 02 '17 at 11:30

answered Jun 02 '17 at 09:21

ndpu

22,225
6
54
69

Problem solved. It will be `currentTarget` not `target`. Reference https://stackoverflow.com/a/39357594/4555551 – Iftakharul Alam Jun 02 '17 at 11:13
1

@IftakharulAlam thx, updated answer, didnt notice nested in your question – ndpu Jun 02 '17 at 11:31
Try using `data-` instead of `data_` and you will be able to use `e.target.dataset` – lucas Jun 02 '17 at 12:48

score 16 · Answer 2 · answered Jun 02 '17 at 09:38

You have some things wrong in your code. Let's start with HTML code.

When you need to interpolate an attribute, you must use v-bind. So you have two ways to do that. Using v-bind:attribute="expression" or the shorthand :attribute="expression". Using attribute="{{ expression }}" will definitely not work.

Another important thing, to use a custom attribute name, you should use data-custom-attribute-name instead of data_custom-attribute-name.

<div id="app">
  <a
    href="javascript:"
    class="btn btn-info btn-xs"
    @click="editModal"
    :data-id="staff.id"
    :data-my-amazing-custom-attribute="staff.name">
    Click me!
  </a>
</div>

Now, let's go to JS. From your question I couldn't know where the $staff variable comes from, so I made an adaptation to demonstrate.

new Vue({
  el: '#app',
  methods: {
    editModal: function(event){
      // Here you will be able to see all the
      // custom attributes in camelCase
      console.log(event.target.dataset);
      console.log('ID:', event.target.dataset.id);
      console.log('Name:', event.target.dataset.myAmazingCustomAttribute);
    }
  },
  data () {
    return {
      staff: {
        id: 'some id',
        name: 'Name of my amazing custom attribute'
      }
    }
  }
});

You can check a working version here: https://jsfiddle.net/6v3wyoh6/

Hope it helps!

somethimes it will return currect value and sometimes `undefined` — Iftakharul Alam, Jun 02 '17 at 09:48

score 6 · Answer 3 · answered Jun 02 '17 at 16:04

Getting the id from a data attribute is fine, and will work, but my question would be, why? You're using Vue, so use Vue. You can pass the id directly.

<a class="btn btn-info btn-xs" @click="editModal({{$staff->id}})">
  <i class="fa fa-pencil"></i>
</a>

And your Vue code becomes

methods: {
    editModal: function(id){
        console.log(id);
    }
}

Now you don't need to worry about figuring out what the data attribute is. That's DOM manipulation that you should generally avoid when using Vue because it is unnecessary.

Note: I'm assuming here you are using laravel or something similar such that when {{$staff->id}} is rendered it is rendered as your id.

The only solution on this thread that worked. 10 pts for Griffyndor — DeltaTango, Jun 06 '22 at 22:20

score 0 · Answer 4 · edited Jul 16 '22 at 03:45

0

here the link to vue docs. Exactly the right way to emit a value to an eventhandler.

    <button v-on:click="$emit('enlarge-text', 0.1)">
       Enlarge text
    </button>

edited Jul 16 '22 at 03:45

tony19

125,647
18
229
307

answered Feb 08 '20 at 00:03

Sodu Parsiev

61
1
4

Vue js on click get html5 attribute

4 Answers4

Linked