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

问题

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?

回答1:

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

回答2:

The simplest way is by using @click.stop=""

回答3:

Sorry.

I didn't know stopPropagation method.

来源：https://stackoverflow.com/questions/51710528/prevent-open-when-click-v-btn-in-v-expansion-panel-headers