CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
code-8
code-8

Reputation: 58702

Prevent button on expansion header to trigger the panel

I have a delete button in the header section of my expansion panel. Clicking on the delete button should not show/hide expands the panel, it is for dialogue. Instead, it also expands the panel. How do I prevent it from expanding the panel?

enter image description here

<v-expansion-panel-header>
  {{ vehicle.VIN }}

  <v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
  <v-btn
    text
    class="flex-grow-0"
    v-if="type == 'saved'"
    color="red"
    @click="remove(index, type)"
  >
    DELETE
  </v-btn>
</v-expansion-panel-header>

Live Issue : https://jsfiddle.net/bheng/gv1zech7/

Upvotes: 1

Views: 585

Answers (1)

Eyal
Eyal

Reputation: 1709

You should use the .stop event modifier:

  <v-btn
    text
    class="flex-grow-0"
    v-if="type == 'saved'"
    color="red"
    @click.stop="remove(index, type)"
  >
    DELETE
  </v-btn>

Upvotes: 4

Related Questions