Vuetify: [Feature Request] Make v-card use v-on:click and cursor: pointer instead of <router-link>

Created on 12 Nov 2017  路  12Comments  路  Source: vuetifyjs/vuetify

New Functionality

Put links in the card's text

Improvements

I have defined my own v-card component that piggy backs off vuetify's style and implements this here (need to work out some cursor issues): https://github.com/Coletrane/mountain-bike-virginia/blob/nuxt/components/PostCard.vue

Bugs or Edge Cases it Helps Avoid

I was trying to get server side rendering up and kept getting issues since it was rendering an <a> inside of another <a> It wasn't immediately obvious that this was what was getting my server and client rendered pages out of sync.

wontfix

Most helpful comment

To add to this, for some reason unknown'st to me @click didn't work. but native does.

No work:

<v-card @click="doSomething()">
  ...
</v-card>

Works:

<v-card @click.native="doSomething()">
  ...
</v-card>

All 12 comments

I don't understand what this is supposed to solve, v-card is already a div unless you give it a href

So say I want the whole card to be a link, but I want some of the text to be a link to a different location. This will work with a client rendered app but not with a server rendered one since nested <a> tags are invalid markup.

You can already do this just by using an @click="" handler on the card and do your route change in that. Replacing all linked cards with click handlers is bad for SEO so will not be done by the framework itself.

To add to this, for some reason unknown'st to me @click didn't work. but native does.

No work:

<v-card @click="doSomething()">
  ...
</v-card>

Works:

<v-card @click.native="doSomething()">
  ...
</v-card>

I can reproduce @lcherone 's issue. @click doesn't work for v-card components. Have to use @click.native.

same for me, can anyone check this issue?

I have the same problem! :(
@lcherone thy, it work for me!

@KaelWD
https://codepen.io/yesworld/pen/EeRbLM?editors=1010

Yup this is an issue for me as well since upgrading to vuetify 1.3.5 from 0.17.

It did work in 0.17

I am working around the issue by using v-on:click.native for now.

@KaelWD Is there a process to re-open this issue?

I think with all these guys raising the concern, the ticket is definitely worth re-visiting. It feels weird to not have event on cards especially that it's highly used.

Fixed, but there's at least 12 people here who could have just opened a new issue considering it had nothing to do with the original one.

@lcherone solution worked for me, thank you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

milleraa picture milleraa  路  3Comments

aaronjpitts picture aaronjpitts  路  3Comments

dschreij picture dschreij  路  3Comments

Webifi picture Webifi  路  3Comments

paladin2005 picture paladin2005  路  3Comments