当 vuetify 的 v-card 具有关联的链接时，从 v-card 中移除点击效果

Question

我有一个 v-card 列表，所有这些都将 to 属性设置为某些东西。 当我点击它时，默认行为是点击效果，这是我不想要的。如何删除它？

代码看起来像这样：

<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>

以下是我所说的一些图片：

当我单击其中一项时，会出现以下内容：

如果我放开点击，屏幕上的其他地方，这样我就不会访问链接，它会保持这样的状态：

我希望移除这两种效果，并让物品保持白色。

我尝试了一些样式，但无济于事，似乎无法找到颜色变化的来源。

// Example (but doesnt work)
.v-card--link:active {
    background-color: white !important;
}

无论如何，当 v-card 组件用作链接时，如何删除这些额外的装饰？

Answer 1

如果您想删除点击 v-card 时出现的动画，您可以通过添加：

:ripple="false"

到你的 v-card 标签，你可以在这里阅读更多关于涟漪指令的信息：https://vuetifyjs.com/en/directives/ripple/

编辑： 根据 cmets，它没有删除灰色背景，您可以将其添加到您的 CSS 中，它也会删除背景

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