Today, i would like to show you get custom attribute value vuejs. if you have question about vue js click event get attribute vue value then i will give simple example with solution. This tutorial will give you simple example of vue js get attribute value. We will look at example of vue get data attribute on click. follow bellow step for get data 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? - HDTuto.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...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example