Vuetify - How to handle click event on <v-btn>?

Question

I'm new to vuetify and vue, trying to figure out how to handle click event on <v-btn>. (Using vue 2.6.10 and vuetify 2.0.0)

(Surprised that didn't find a single code snippet that could work, after searching in both vuetify official document & via Google.)

---

Code

• Button

  <v-btn color="primary" rounded @onclick.native="startQuiz">Start</v-btn>

• Handler method from methods part of the containing component.

  startQuiz() {
    console.log('start');
    alert('start');
  }
  

After click the button, can't see console output from browser, neither did the alert pop-up.

In browser's vue plugin, under the Events sub tab, I can see following events:

click $emit by <VBtn>

---

Questions

• How to make the startQuiz method called when click the button?

---

Update - Summary

I checked following link:

http://stackoverflow.com/questions/45369553/difference-from-click-and-v-onclick-vuejs

Turns out it's just a shorthand for v-on:click, and onclick is from javascript, and invalid in vue's context.

Answer 1

I recommend you to read VueJS Events Docs, in there you'll get everything you need. There's an example of the docs:

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

Answer 2

Do it this way;

<v-btn color="primary" rounded @click.prevent="startQuiz">Start</v-btn>

methods:{
     startQuiz(){
           console.log('start')
     }
}