How to Stop Propagation / Opening v-expansion-panel when using v-edit-dialog?

问题

Any kind of button included on the expansion panel will also open/close the panel when you click it (propagation), which is undesired generally. This is easily prevented with using @click.stop. v-edit-dialog component presents a challenge however. How do you prevent this edit-dialog from opening/closing the expansion panel when it is activated?

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>

回答1:

You can use @click.native.stop

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

Codepen demo

来源：https://stackoverflow.com/questions/53179960/how-to-stop-propagation-opening-v-expansion-panel-when-using-v-edit-dialog

标签

javascript

Vue.js

vuetify.js