Comments (12)
You must call click .native. Implicit events only work on components with that modifier.
from vuetify.
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.
from vuetify.
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>
from vuetify.
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.
from vuetify.
I wasn't aware of the change. That fixed it.
from vuetify.
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.
from vuetify.
I'm not sure what you are asking for? @click.native is a Vue 2 component caveat, not a Vuetify one.
from vuetify.
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...
from vuetify.
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.
from vuetify.
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.
from vuetify.
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
from vuetify.
v-btn(round color='success' v-on:click.native="console.log('foo')") for me even native does not fix this
from vuetify.
Related Issues (20)
- [Bug Report][3.5.17] Date-Picker ":weekdays:.." will still show seven dates on one row, it does not create a new row for each week
- [Feature Request] Support adjacent placement of labels for form inputs (Text Fields, Textarea, ...)
- [Bug Report][3.5.17] Vuetify can't be installed in an existing project that's using [email protected] HOT 3
- [Bug Report][3.5.17] Vuetify Component and Vue Render Function h() HOT 1
- [Bug Report][3.6.1] Checkboxes in VDataTable is not showing as selected when returning an object on item-value HOT 1
- [Bug Report][3.6.1] VDataTable mobile mode is based on screen width, not container width HOT 4
- [Bug Report][3.6.1] VCarouselItem and content-class
- [Bug Report][3.6.1] VDataTable mobile shows header for sort & select when neither is applicable HOT 1
- [Bug Report][3.6.0] VSelect menu shifted few pixels to the right HOT 6
- [Bug Report][3.6.1] TypeError: Cannot convert object to primitive value HOT 1
- [Bug Report][3.5.18] When using subtitles you do not see the multiple selection box
- [Bug Report][3.6.3] ref behaviour changed HOT 3
- [Bug Report][3.6.3] The font-weight of the header of the data-table differs between the normal and the mobile version HOT 1
- [Bug Report][3.6.3] Tooltip directive modifiers don't work
- [Feature Request] Simplify defaults assignment for input like components (textfields, selects, autocompletes, etc.) HOT 2
- [Bug Report][3.6.3] Expand transition occasionally throwing error
- [Bug Report][3.6.3] VDataTableServer - on mobile - is ignoring #headers slot HOT 2
- [Feature Request] VConfirmEdit - expose dirty/pristine status
- [Bug Report][3.6.0-alpha.0] data table sort field in header is always showing in version 3.6.0 and higher HOT 3
- [Bug Report][3.6.3] v-tooltip doesn't work with Nuxt 3 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetify.