How to Get Data Attribute Value in Vue JS?

By Hardik Savani July 7, 2023 Category : 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:

Read Also: Vue JS Get Checked Radio Button Value on Onchange Event
22

I hope it can help you...

Tags :
Previous

JQuery Remove Parent Table Row on Button Click Event
Next

Laravel 6 CRUD Application Tutorial

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares