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 ponent when it is to be used as link?

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 ponent when it is to be used as link?

• javascript
• css
• vue.js
• vuetify.js

1 Answer 1

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./en/directives/ripple/

EDIT: According to ments, it didn't remove gray background, you can add this to your CSS and it will remove the background as well

.v-card--link:before {
  background: none;
}