Vue js on click get html5 attribute
I am making a project using the latest vuejs. In this project, I want to get the html5 attribute that binds the vue on the click event.
my button code
<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
var staffModal = new Vue({
el: '#app',
methods: {
editModal: function(){
console.log(this.data_id);
}
}});
In my console, I am getting undefined. How to get the correct value.
source to share
The MouseEvent instance is passed as the first parameter to the click event handler. Use a function getAttribute
to access the attribute. MouseEvent.target
will point to <i>
and MouseEvent.currentTarget
to <a>
(the element to which the event listener is connected). 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
notdata_id
source to share
Something is wrong with your code. Start with HTML code.
When you need to interpolate an attribute, you must use v-bind. Thus, you have two ways to do it. Using v-bind:attribute="expression"
or shorthand :attribute="expression"
. Using it attribute="{{ expression }}"
will definitely not work.
One more important thing: to use the name of the custom attribute, you should use data-custom-attribute-name
instead 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 release the 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 the working version here: https://jsfiddle.net/6v3wyoh6/
Hope it helps!
source to share
Getting an attribute id
from a data attribute is fine and will work, but my question would be why? You are using Vue, so use Vue. You can transfer id
directly.
<a class="btn btn-info btn-xs" @click="editModal({{$staff->id}})">
<i class="fa fa-pencil"></i>
</a>
And your Vue code will become
methods: {
editModal: function(id){
console.log(id);
}
}
Now you don't have to worry about what a data attribute is. This is DOM manipulation that you usually avoid when using Vue because it is optional.
Note. I am assuming you are using laravel or something like that, so when {{$staff->id}}
displayed, it appears as yours id
.
source to share