Skip to content

All topics  /  Vue

Vue JS Get Data Attribute Value Example

Vue ·

Hi Guys,

Today, I will learn you how to get data attribute value in vue js. we will show example of vue js get data attribute value. i can help you to get data attribute value in vuejs. we will write a button click event and get custom attribute value in vue.js.

In this example, we will take on the button with a custom attribute like "data-id" and on click event of the button, we will get that value of the custom data attribute value in the 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? - Nicesnippets.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="15">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>

It will help you...

More on this topic