Remove the clicking effect from a vuetify’s v-card when it has a link associated to it Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Remove the clicking effect from a vuetify’s v-card when it has a link associated to it without wasting too much if your time.

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:

enter image description here

If I let go of the click, elsewhere on the screen so that I don’t visit the link it stays like this:

enter image description here

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/

We are here to answer your question about Remove the clicking effect from a vuetify’s v-card when it has a link associated to it - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji