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

admin管理员组

文章数量:1335386

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 ponent.

  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:

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

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 ponent.

  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./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.

• javascript
• vue.js
• vuejs2
• vuetify.js

Share Improve this question Follow edited Aug 2, 2019 at 3:04 Eric asked Aug 2, 2019 at 2:24 EricEric 25k2525 gold badges165165 silver badges227227 bronze badges 9

• 2 That should be @click="startQuiz". – Husam Elbashir Commented Aug 2, 2019 at 2:28
• 4 Just to be sure. Did you try @onclick="startQuiz" or @click="startQuiz"? – Husam Elbashir Commented Aug 2, 2019 at 2:38
• 2 @EricWangyou should definitely look through the event modifiers to better understand them. @click.xxx is very useful to prevent the default action or stop propagation etc... vuejs/v2/guide/events.html#Event-Modifiers – Tim Wickstrom Commented Aug 2, 2019 at 3:36
• 1 Don't use .native modifier unless you're 100% certain that the root element of the ponent broadcasts the event – Ohgodwhy Commented Aug 2, 2019 at 6:08
• 1 @TimWickstrom I have finished reading most part of event modifier, the .once modifier is especial useful here on the Start button, thanks. – Eric Commented Aug 2, 2019 at 6:28

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 1

Do it this way;

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

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

I remend 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)
      }
    }
  }
})

本文标签： javascriptVuetifyHow to handle click event on ltvbtngtStack Overflow