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.
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
data- instead of data_ and you will be able to use e.target.datasetYou 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!
undefined
this.$el.dataset.myAmazingCustomAttribute workedGetting 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.
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>
