I am facing an issue with my child component, a dialog box where I pass the prop dialog from the parent component. Whenever I try to close it by changing the prop value, I receive a warning. Can someone please guide me on the correct approach to resolve this problem?
<template>
<div>
<v-dialog v-model="dialog" max-width="290" persistent>
<v-card>
<v-card-title class="headline">
{{ order.fullname }}
</v-card-title>
<v-card-text> {{ order.address }} </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text @click="dialog = !dialog">
Disagree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: "EditOrder",
props: ["order", "dialog"],
data() {
return {
dialogCta: this.dialog,
};
},
methods: {
closeDialog() {
// console.log(this.dialog);
this.dialogCta = !this.dialog;
console.log(this.dialogCta);
},
},
};
</script>