1

Parent component:

<template>
    <v-btn v-on:click="dialog = !dialog">
    </v-btn>
</template
<script>
    export default {
        data: () => ({
           dialog: false
        }
</script

Child component:

<template>
    <v-layout>
        <v-dialog v-model="toggledialog">
            <v-btn color="green darken-1" flat="flat" 
            @click.native="toggledialog = false">Close</v-btn>
        </v-dialog>
    </v-layout>
</template>
<script>
    export default {
        data: () => ({
            toggledialog: false,
        }),
        watch: {
            dialog: function(){
                this.toggledialog = true
            },
        },
        props:['dialog']
}
</script>

This code works but I really don't like this workaround with watch.

Questions:

  1. How to open dialog in child component when v-model="toggledialog" if it doesn't watch for props:['dialog']?
  2. How to change dialog to false in parent component when I i change it in child component v-model="dialog" if in Vue JS it is not allowed to change props?
Richard Matsen
  • 20,671
  • 3
  • 43
  • 77
Svetoslav Dimitrov
  • 869
  • 4
  • 16
  • 38
  • There seems to be no examples on the [docs](https://next.vuetifyjs.com/en/components/dialogs#usage) of using `v-dialog` in separate component, but this question [Open a Vuetify dialog from a component template in VueJS](https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs) has two methods. – Richard Matsen Jan 28 '18 at 22:54
  • Use a Vue global event bus ? – Jacob Goh Jan 29 '18 at 01:33
  • Possible duplicate of [Open a Vuetify dialog from a component template in VueJS](https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs) – Traxo May 06 '19 at 11:05

1 Answers1

4

Pass value prop as value to v-dialog, and re-emit input v-dialog whenever you want to close it:

//CustomDialog.vue
<v-dialog :value="value" @input="$emit('input')">
    <v-btn color="green darken-1" flat="flat" 
        @click.native="$emit('input')"
    >Close</v-btn>
</v-dialog>
...
props:['value']

and add v-model to your parent

//Parent.vue
<custom-dialog v-model="dialog">

So no data and no watch

example

Traxo
  • 18,464
  • 4
  • 75
  • 87