The question is published on by Tutorial Guruji team.
I have a list of v-cards, all of which have the to
prop set to something.
When I click on it, the default behaviour is to have the clicked effect, which I do not want. How do I remove it?
The code looks looks something like this:
<v-col v-for="item in myItems" :key="`${item.id}`" cols="12"> <v-card :key="item.id" class="pl-4 pr-4" :to="item.href"> <div class="some-unrelated-class"> <p>{{item.name}}</p> </div> </v-card> </v-col>
Here are some images of what I am talking about:
When I am clicking on one of these items, the following appears:
If I let go of the click, elsewhere on the screen so that I don’t visit the link it stays like this:
I want both of those effects removed and for the item to just stay the white.
I’ve tried playing a bit around with the styles but to no avail and can’t seem to find the source of the color change.
// Example (but doesnt work) .v-card--link:active { background-color: white !important; }
Anyway, how can I remove these extra decorations on a v-card component when it is to be used as link?
Answer
If you want to remove the animation the occurs when you click on the v-card you can do it by adding:
:ripple="false"
to your v-card tag, you can read more about ripple directive here: https://vuetifyjs.com/en/directives/ripple/