CODEWITHSUNDEEP
vuejs2vuetify.js
Bill
Bill

Reputation: 540

vuetify: Stop parent animation on click

I have a card which have 2 buttons and I want to have difference function when clicking on:

  1. Card
  2. Button Yes
  3. Button No

I layout the card this way

<v-card
  @click.self="$emit('card:clicked')"
>
    <v-card-actions>
      <v-spacer/>
      <v-btn
        @click.stop="$emit('btn:yes')"
      >
        Yes
      </v-btn>
      <v-btn
        @click.stop="$emit('btn:no')"
      >
        No
      </v-btn>
    </v-card-actions>
</v-card>

With modifier stop I can emit btn:yes or btn:no event without emit event card:clicked on card, but the clicked animation on card still show and is very confusing.

My question is how I can stop the animation happen like stopping the event card:clicked when I click on the button instead of the card.

Upvotes: 0

Views: 708

Answers (1)

Bill
Bill

Reputation: 540

After some more search I find out the animation call ripple with vuetify.

With the right words I am able to find the answer at Child and parent ripple triggered

And I can solve my issue by adding @mousedown.stop like below

<v-card
  @click.self="$emit('card:clicked')"
>
    <v-card-actions>
      <v-spacer/>
      <v-btn
        @click.stop="$emit('btn:yes')"
        @mousedown.stop
      >
        Yes
      </v-btn>
      <v-btn
        @click.stop="$emit('btn:no')"
        @mousedown.stop
      >
        No
      </v-btn>
    </v-card-actions>
</v-card>

Upvotes: 2

Related Questions