[Vuejs]-Vuetify – getAttribute of data attribute in a component returns null

by

0👍

✅

You can try something like below. currentTarget property gives you parent element of the target click. thereby you can get the attribute.

methods: {
        btnClick(e) {
            console.log(e.currentTarget.dataset.post);
        }
    }

0👍

The v-btn is a component not a native html element that could be handled as target for some events, in order to achieve the same behavior add a ref to that component like <v-btn ... ref="btn">.. and access the attribute as this.$refs.btn.$el.getAttribute('data-post') :

Full exampele

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    btnClick(e) {
      console.log(this.$refs.btn.$el.getAttribute('data-post'));
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-content>
      <v-btn @click="btnClick" data-post="p123" ref="btn">Blue Button</v-btn>
    </v-content>
  </v-app>
</div>

Leave a comment