Vuetify: <v-btn> v-on:click doesn't work

[mfferreira]

Trying to set a method on a v-btn for the click event, but it doesn't fire.

I've tried using both v-on:click and @click, and both don't work.

Here's a snippet:

v-btn(flat block right  class="darken-1" v-on:click="console.log('foo')") Login

[johnleider]

You must call click .native. Implicit events only work on components with that modifier.

https://vuejs.org/v2/guide/migration.html#Listening-for-Native-Events-on-Components-with-v-on-changed

[mfferreira]

I wasn't aware of the change. That fixed it.

[firepick1]

Confusingly, <v-btn> doesn't look like a native HTML component. It looks like a Vue component.
Indeed, <v-list-tile-title> accepts @click as expected. Might we re-open this and lower the priority? Perhaps the expanded v-btn could simply emit a click to a parent div?
I'm happy brainwashing myself with this special case for v-btn in the short term, but longer term, it's an awkard exception to a beautiful framework.

[johnleider]

I'm not sure what you are asking for? @click.native is a Vue 2 component caveat, not a Vuetify one.

[firepick1]

I think of <button> as a native component. whereas <v-btn> is Vue component. So it would feel natural to use <button @click.native=...>. However the "v-btn" isn't a native HTML element. It is a Vue component. I just recently ran into this kind of oddness in Vue this week before I found Vuetify. https://github.com/firepick/vue-g-row-col/blob/master/src/grid.vue
I had to explicitly emit an event. I imagine something like this could make @click work for v-btn. Not sure though...

[johnleider]

There are two types of Vue components, regular and functional.

Regular components must either explicitly emit a native event for the developer to catch using the standard @eventType, or the developer must use @eventType.native. This was a Vue 2.0 change that was announced pretty early on and did differ from how it was handled in 1.0

Functional components can use the regular @eventType as they are not instances of Vue.

While it may be nice to explicitly emit the click event on the button to save writing .native, once I start there, it will never end where I will be asked to add it.

[firepick1]

Ahhh. OK. Then we shall all learn to add ".native" to Vue thingies when the expected doesn't work. I guess it's more of an issue for Evan. It must have been a painful change for him as well. Thank you.

[Thaina]

I start using vue just last week and so I am not familiar with vue much. But I felt confused that just switch from div to md-layout make v-on:click not work and need to add .native

It would be more intuitive if all event need to add .native equally. So if I change html tag to see layout, all of event still work. but, well, I see that it would be bloated

I think this should be improved somehow

[pdcmoreira]

On all components I made in my previous projects that were wrapping native elements, I always proxied the most commonly used native events, like <button @click="$emit('click', $event)">...</button>.
This way, when I was using my custom button, I could just listen to its click event like it was a native element, like this: <favourite-button @click="addToFavourites(item)"></favourite-button>.
It just feels natural. We shouldn't have to think if we're dealing with a native button or a custom one, both should behave the same. At least that's how I design my components.

[garyo]

It would perhaps be good for the Vuetify docs to mention what events are emitted by each component (@click, @click.native, @input, etc.). It's hard for a user to know which ones to listen for.

[saikiranpalimpati]

v-btn(round color='success' v-on:click.native="console.log('foo')") for me even native does not fix this

[DespertaWeb]

TOTALLY agree with @pdcmoreira it took me 1 full day to figure it out.
The weird thing is that it worked until I did tested with Jest & Vue-test-utils.
Why is that happening?

side note: Vuetify documentation is so poor. When I could choose I'd stay away from Vuetify. There's some basic stuff missing that, after a few years, it's just not fair.

@saikiranpalimpati it just worked for me:

    <v-btn @click.native="addToCart($event)">
      Add
      <v-icon right>fas fa-cart-plus fa-xs</v-icon>
    </v-btn>