How to get data attribute value in Vue JS?

How to get data attribute value in Vue JS?

In this post we will give you information about How to get data attribute value in Vue JS?. Hear we will give you detail about How to get data attribute value in Vue JS?And how to use it also give you demo for it if it is necessary.

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…

Hope this code and post will helped you for implement How to get data attribute value in Vue JS?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

2  +  7  =  

We accept paid advance and paid guest Posting on our Site : Contact US