javascript - Vuetify - 如何处理 ​​ 上的点击事件？

Question

我是 vuetify 的新手和vue ，试图找出如何处理 <v-btn> 上的点击事件。 (使用 vue 2.6.10 和 vuetify 2.0.0 )

(在 vuetify 官方文档和 Google 中搜索后，没有找到任何可以工作的代码片段。)

<小时/>

代码

• 按钮

  <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

我建议您阅读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)
      }
    }
  }
})