How to get the data attribute value in Vue JS?

In Vue, you can get the value of a data attribute using the v-bind or : directive. The v-bind directive is used to bind an attribute to an expression. You can use the shorthand : instead of v-bind for brevity.

Here’s an example of how to get the value of a data attribute in Vue:

<template>
  <div>
    <button :data-id="123" @click="getData">Get Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    getData(event) {
      const dataId = event.target.getAttribute('data-id');
      console.log(dataId);
    },
  },
};
</script>

In this example, we have a button with a data-id attribute set to 123. We’re using the : shorthand for v-bind to bind the value of data-id to the expression 123. When the button is clicked, the getData method is called. We’re using event.target.getAttribute('data-id') to get the value of the data-id attribute, which is 123. We’re then logging this value to the console. You can use the same technique to get the value of any data attribute in Vue.