How to get data attribute value in Vue JS?
If you need to get attribute value on click event in vue js then i can help you to getting data attribute value in vuejs. we will write button click event and get custom attribute value in vue.js.
In this example we will take on button with custom attribute like "data-id" and on click event of button we will get that value of custom data attribute value in console. we will get data attribute value using event.target.getAttribute().
You can see bellow syntax:
event.target.getAttribute(attribute_name);
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to get data attribute value in Vue JS? - ItSolutionStuff.com</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="callFunction" data-id="22">Click Me</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message:"Welcome, Please Wait...."
},
methods:{
callFunction: function (event) {
var id = event.target.getAttribute('data-id');
console.log(id);
}
}
});
</script>
</html>
Output:
22
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to Download File using Axios Vue JS?
- Vue JS Get Dropdown Selected Value Example
- How to get string length in Vue JS?
- Vue JS Convert String to Array | Vue JS Split String Example
- Vue JS Get Array Length Or Object Length Example
- Vue JS call a function on load Example
- How to get current date time in vue js?