使用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演示