Prevent open when click v-btn in v-expansion-panel headers

Question

test (e) {
  e.preventDefault()
  console.log('foo')
},

<v-expansion-panel>
  <v-expansion-panel-content>
    <div slot="header">
      <v-btn icon flat @click="test($event)"><v-icon>add</v-icon></v-btn>
      title
    </div>
    <contents />
  </v-expansion-panel-content>
</v-expansion-panel>

This is v-expansion-panel with action button in it's header.

When I click action button, expansion panel is opened.

Can I have expansion panel doesn't open when I click the button?

Answer 1

By using @click.native.stop on v-btn your button click will work and your expansion panel will not open.