在 v-card 中同时使用 "to" 道具和 Vuetify 中 "actions" 部分中的一些按钮

Question

我有这样一张卡片：

<v-card :to="groupRoute" class="group-card mx-auto" color="#26c6da" dark max-width="400">
    <v-card-title>
      <span class="text-h6 font-weight-light d-flex" style="width: 100%">
        <span class="name">{{ group.name }}</span>
        <span class="flex-grow-1" />
        <span class="creation">{{ creation }}</span>
      </span>
    </v-card-title>

    <v-card-text class="text-h6 font-weight-bold">"{{ group.description }}"</v-card-text>

    <v-card-actions>
      <v-icon class="mr-1">mdi-account</v-icon>
      <span class="partecipants subheading mr-2">
        <span class="partecipants">{{ group.partecipants.length }}</span>
        <span class="mx-1">/</span>
        <span class="maxPartecipants">{{ group.maxPartecipants }}</span>
      </span>

      <v-row align="center" justify="end">
        <v-btn class="blue--text text--darken-3" text icon @click="edit">
          <v-icon>mdi-pencil</v-icon>
        </v-btn>
        <v-btn color="red" class="mr-2" icon @click="delete">
          <v-icon>mdi-delete</v-icon>
        </v-btn>
      </v-row>
    </v-card-actions>
  </v-card>

请注意，唯一重要的部分是：:to="groupRoute" 和带有两个按钮的 <v-card-actions>。

这里的问题是卡片 to 覆盖了按钮上的点击方法，所以即使我点击按钮而不是整个卡片，我也会被重定向到 groupRoute。

Answer 1

将@click更改为@click.prevent以触发事件的preventDefault

在 v-card 中同时使用 "to" 道具和 Vuetify 中 "actions" 部分中的一些按钮

User both "to" prop in a v-card and some buttons inside the "actions" section in Vuetify

vue.js

vuejs2

vuetify.js