[Vuejs]-Vuejs click modifiers don't work on an element inside of another element with click events

by

2👍

I found the solution. I just added @dblclick.stop.prevent="" to the button:

<v-card @dblclick="cardMethod()" v-ripple>
  <div>
    <h2>Title</h2>
    <h3>Description</h3>
  </div>
  <v-btn @dblclick.stop.prevent="" @click.stop.prevent="buttonMethod()">
    button
  </v-btn>
</v-card>
👤AlekseyHoffman

1👍

Solution

I would take the @dblclick event out of the parent v-card and put it only in the area that you want to be clickable.
In this case the div which contains everything beside the button.

<div id="app">
  <v-app id="inspire">
    <h1>See events in the console</h1>
    <v-card v-ripple class="card elevation-8">
      <div @dblclick="cardMethod()">
        <h2>Title</h2>
        <h3>Description</h3>
      </div>
      <v-btn @click.prevent.stop="buttonMethod()" dark color="blue">
        button
      </v-btn>
    </v-card>
  </v-app>
</div>
👤Darjusch

1👍

I have hack rather proper solution:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    cardMethod () {
      console.log('cardMethod')
    },
    buttonMethod () {
      console.log('buttonMethod')
    }
  }
})
.custom-card .v-card__actions { position: absolute; left: 0; bottom: 0 }
.pb-52 { padding-bottom: 52px !important}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card class="custom-card elevation-8" max-width="344">
          <v-card-text @dblclick="cardMethod()" v-ripple class="pb-52">
            <h2>Title</h2>
            <h3>Description</h3>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="buttonMethod()" dark color="blue">Button</v-btn>
          </v-card-actions>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>
👤Syed

Leave a comment