Vuetify 带有按钮的可点击卡片

Question

我有一个可点击的 v-card，由于其 to 道具，它充当 link。该卡片还包含一个可单击的按钮。像这样：

<v-card :to="{ name: 'MyView' }">
  <v-btn @click.stop="myAction"></v-btn>
  ... other elements ...
</v-card>

现在，当单击卡片内的按钮时，会执行按钮的单击处理程序 (myAction)，但也会执行 link。我如何才能将其更改为仅在单击按钮时执行单击处理程序？

Answer 1

看来应该改用prevent。因为浏览器对 link 的默认操作应该停止。

<v-card :to="{ name: 'MyView' }">
  <v-btn @click.prevent="myAction">something</v-btn>
  ... other elements ...
</v-card>

Vuetify clickable card with button