I'm using the latest Version of Vuetify and want to open a dialog when I click on a card. The problem is that this card contains multiple child elements ( e.g. a form ) and I only want to open a dialog when the card itself had been clicked.

Reproduction link

<template>
  <v-app>
    <v-main>
      <v-dialog v-model="isDialogOpen">
        <template v-slot:activator="{ props }">
          <!-- <v-btn v-bind="props">Open Dialog</v-btn> -->
          <v-card v-bind="props">
            <v-card-title>If (only) card was clicked it should open a dialog</v-card-title>
            <v-card-text>
              <v-form>
                <v-text-field label="This is just" />
                <v-text-field label="a very basic form" />
                <v-text-field label="inside a card" />
              </v-form>
            </v-card-text>
            <v-card-actions>
              <v-btn>Some action</v-btn>
              <v-spacer />
              <v-btn>Other action</v-btn>
            </v-card-actions>
          </v-card>
        </template>
        <v-card>Dialog goes here</v-card>
      </v-dialog>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
  
const isDialogOpen = ref(false)
</script>

The dialog opens when clicking on the card but it also opens when clicking something inside the card, e.g. the text fields or the buttons.

Is there a way to only open the dialog when clicking the card?

CodePudding user response：

Place @click.stop on the elements on which you don't want the click to bubble.

Working demo.

Documentation: event modifiers.

Note: if you place @click.stop on the card's immediate children (which is what you asked for), you won't be able to open the dialogue anymore as the entire surface of the card is covered by: <v-card-title />, <v-card-text /> and <v-card-actions />, effectively leaving no pixel where a click would actually open the dialogue.