Vue Get Data Attribute on Click Example

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>

Vue Get Data Attribute on Click Example

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles