display info of event target is ko

Question

I have a button with id & name that I wanted to display their value but in my code nothing is displayed. what is wrong with it ?

  <v-btn id="mytest" name="test" @click="addNewEntry">{{'add '}}</v-btn>


  methods: {
    addNewEntry() {
        document.getElementById("mytest").addEventListener('click', (event) => {        
        console.log('id value ' , event.target.id);
        console.log('name value ' , event.target.name)
      });
    },
}

Answer 1

Use ref and call this.$refs to get the attribute of the button.

For vuetify 2

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
    methods: {
      addNewEntry() {
        console.log('id value', this.$refs.myBTN['$attrs'].id)
        console.log('name value', this.$refs.myBTN['$attrs'].name)
      },
    },
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>



<div id="app">
  <v-app id="inspire">
    <v-btn 
           ref="myBTN"
           id="mytest" 
           name="test" 
           @click="addNewEntry()"
    >
      Add 
    </v-btn>
    </div>
  </v-app>
</div>

For vuetify 3

Here's a Demo.