Child and parent ripple triggered

Question

I'm using vuetify to design a 'card' component.

I have a parent div with a child button. Now, when I click the button, the ripple effect on the div is triggered.

How can I fix this?

<template>

  <div>

    <v-card v-ripple="true">
      <h3>
        <v-card-title>{{ title }}</v-card-title>
      </h3>

      <v-layout row>
        <v-flex grow>
          <v-card-text>
            {{ plaats }}
            <br />
            {{ sub_title }}
          </v-card-text>
        </v-flex>

        <v-flex shrink>
          <v-card-actions>

            <v-btn small color="blue" fab>
              <v-icon medium color="white">mdi-calendar</v-icon>
            </v-btn>

            <v-btn small color="green" fab>
              <v-icon medium color="white">mdi-calendar-check</v-icon>
            </v-btn>

            <v-btn small color="red" fab>
              <v-icon medium color="white">mdi-calendar-remove</v-icon>
            </v-btn>

          </v-card-actions>
        </v-flex>

      </v-layout>
    </v-card>

  </div>

</template>

Answer 1

The solution was indeed Event.stopPropagation but I had to add it to the mousedown action. So @mousedown.stop and then add your function with @click.stop="null" as @Frank mentioned before.

Answer 2

Note @mousedown event will not fire on mobile, thus we also need to add @touchstart.

Codepen

<v-list>
  <v-list-tile :ripple="true" @click="">

    <v-list-tile-action>
      <v-btn 
          @click.stop="" 
          @mousedown.stop="" 
          @touchstart.stop=""
      >Click</v-btn>
    </v-list-tile-action>

    <v-list-tile-content class="pl-5">
      Click tile
    </v-list-tile-content>

  </v-list-tile>
</v-list>