CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
EuberDeveloper
EuberDeveloper

Reputation: 1048

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

I have a card like this:

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

Note that the only important parts are: :to="groupRoute" and the <v-card-actions> with the two buttons.

The problem here is that the fact that the card has to, overwrites the click methods on the buttons, so even if I click the button and not the whole card, I am redirected to the groupRoute.

Upvotes: 1

Views: 192

Answers (1)

Tentaro F
Tentaro F

Reputation: 146

Change @click to @click.prevent to trigger preventDefault of the event

Upvotes: 1

Related Questions