Vuetify - 如何处理 <v-btn>​​ 上的点击事件？

Question

我是vuetify 和vue 的新手，试图弄清楚如何处理<v-btn> 上的点击事件。 （使用vue 2.6.10 和vuetify 2.0.0）

（惊讶地发现在 vuetify 官方文档和谷歌搜索后，没有找到一个可以工作的代码 sn-p。）

---

代码

• 按钮

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

• 来自包含组件的methods 部分的处理程序方法。

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

点击按钮后，浏览器看不到控制台输出，也没有弹出警告。

在浏览器的 vue 插件中，在 Events 子标签下，我可以看到以下事件：

click $emit by <VBtn>

---

问题

• 点击按钮时如何调用startQuiz方法？

---

更新 - 总结

我检查了以下链接：

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

原来它只是v-on:click 的简写，而onclick 来自javascript，在vue 的上下文中无效。

Answer 1

这样做；

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

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

Answer 2

我建议你阅读VueJS Events 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)
      }
    }
  }
})