使用 v-edit-dialog 时如何停止传播/打开 v-expansion-panel？

Question

当您单击扩展面板（传播）时，扩展面板上包含的任何类型的按钮也会打开/关闭面板，这通常是不希望的。使用@click.stop 很容易避免这种情况。然而，v-edit-dialog 组件提出了挑战。如何防止此编辑对话框在激活时打开/关闭扩展面板？

new Vue({
 el: '#app',
 data(){    
   return { title: "Editable Title" }
 }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <v-card width=400>
    <v-expansion-panel popout>
          <v-expansion-panel-content>
            <div slot="header">
              <v-edit-dialog :return-value.sync="title">                
                {{ title }}              
            <v-text-field slot="input" v-model="title"></v-text-field>
          </v-edit-dialog>
            </div>
            <v-card color="blue lighten-4">
              <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
        </v-card>
  </v-app>
</div>

Answer 1

你可以使用@click.native.stop

          <v-edit-dialog @click.native.stop>                
                Editable Title                 
            <v-text-field slot="input"></v-text-field>
          </v-edit-dialog>

Codepen demo