ItSolutionStuff.com

How to Get Data Attribute Value in Vue JS?

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

22

I hope it can help you...

Tags: Vue.JS
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Use Ternary Operator in Vue JS?

Read Now →

How to Define Global Variables in Vue JS?

Read Now →

How to Get Query String Parameters in Vue JS?

Read Now →

How to Download File using Axios Vue JS?

Read Now →

Vue JS Get Dropdown Selected Value Example

Read Now →

How to Get String Length in Vue JS?

Read Now →

How to Convert String to Array in Vue JS?

Read Now →

Vue JS Get Array Length or Object Length Example

Read Now →

Vue JS Call a Function On Load Example

Read Now →

Laravel Vue JS File Upload Example

Read Now →

How to Get Current Date and Time in Vue JS?

Read Now →

How to Create and Use Component in Vue JS Cli?

Read Now →

How to Replace String in Vue JS?

Read Now →

Laravel Vue JS Pagination Example with Demo

Read Now →