Vue vuetify Dialog How to tigger dialog component without click

Viewed 34

How can I tigger the dialog from main file? I have no idea how to tigg ConfirmationDialog value "dislog" to true. Or any other method to do it? Dont want to group the code as a one file.

That is a component called ConfirmationDialog.vue

<template>
    <v-layout row justify-center>
        <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
        <v-dialog v-model="dialog" max-width="290">
            <v-card>
                <v-card-title class="headline">Use Google's location service?</v-card-title>
                <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="green darken-1"
                        flat="flat"
                        @click.native="dialog = false"
                    >Disagree</v-btn>
                    <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>
<script>
export default {
    data() {
        return {
            dialog: false
        }
    }
}
</script>

Main File:

<template>
<div class="row">
    <div class="col-12">
        <confirmationDialog></confirmationDialog>
    </div>
</div>
</template>
<script>
import confirmationDialog from '../confirmationDialog'
export default {
    data() {
        return {}
    },
    components: {
        confirmationDialog
    },
    methods: {
        update() {
            // Todo: Tigger Confirmation Dislog
        }
    },
}
</script>
1 Answers

Add a prop called show to the child component (confirmationDialog ) and bind to a parent property :

confirmationDialog

...
<script>
export default {
  props:['show'], 
 data() {
        return {
            dialog: false
        }
    },
mounted(){
   this.dialog=this.show;
}
}
</script>

Main

<template>
<div class="row">
    <div class="col-12">
        <confirmationDialog :show="showDialog"></confirmationDialog>
    </div>
</div>
</template>
<script>
import confirmationDialog from '../confirmationDialog'
export default {
    data() {
        return {
           showDialog:false,
        }
    },
    components: {
        confirmationDialog
    },
    methods: {
        update() {
            this.showDialog=true;
        }
    },
}
</script>
Related