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 ponent 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="/[email protected]/dist/vue.js"></script>
<script src=".js"></script>
<link href=':100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href=".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 modo consequat.</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
        </v-card>
  </v-app>
</div>

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 ponent 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/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/vuetify/dist/vuetify.js"></script>
<link href='https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr/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 modo consequat.</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
        </v-card>
  </v-app>
</div>

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Nov 7, 2018 at 3:10 FauxReal asked Nov 6, 2018 at 21:03 FauxRealFauxReal 4,83244 gold badges2424 silver badges1919 bronze badges 3

• please provide the collection property code – Boussadjra Brahim Commented Nov 6, 2018 at 21:20
• 1 i tried your example in this pen and i can't figure out what do you want exactly? – Boussadjra Brahim Commented Nov 6, 2018 at 23:08
• Okay I made a proper pen. When you click the editable title, the expansion panel opens, I want to stop the opening behavior. – FauxReal Commented Nov 7, 2018 at 2:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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