当 vuetify 的 v 卡具有关联的链接时，删除其点击效果

Question

我有一个 v-cards 列表，所有这些都将toprop 设置为某个值。当我单击它时，默认行为是具有单击效果，这是我不想要的。我该如何删除它？

代码看起来像这样：

<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 标签，您可以在此处阅读有关ripple指令的更多信息： https: //vuetifyjs.com/en/directives/ripple/

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

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