In the component hierarchy, there is a parent component containing a child, which further contains an md-dialog component. The dialog is opened from the parent component using the following code:
ParentComponent.vue
<template>
<div>
<ConfirmDialog
:dialogState="isDialogShown"
@closeDialog="value => isDialogShown = false"
/>
<button @click="handleOpenModal()">open modal</button>
</div>
</template>
<script>
export default {
name: 'ParentComponent',
data() {
return { isDialogShown: false }
},
methods: {
handleOpenModal() {
this.isDialogShown = true;
}
}
}
</script>
Pressing the button triggers the opening of the dialog:
ConfirmDialog.vue
<template>
<md-dialog :md-active.sync="localDialogState">
markup
</md-dialog>
</template>
<script>
export default {
name: "ConfirmDialog",
props: ["dialogState"],
computed: {
localDialogState: {
get() {
return this.$props.dialogState;
},
set() {
this.handleCloseDialog();
}
}
},
methods: {
handleCloseDialog() {
this.$emit("closeDialog");
}
}
};
</script>
The usage of localDialogState's setter for handling side effects like closing the dialog through events such as backdrop click or pressing ESC key could be improved. However, it was necessary to use the setter to capture these events while updating the prop on the parent component. This approach has been adopted due to limitations related to the interaction between props, computed properties, and object instances in Vue.
Considering that this is my first experience with Vue, I am open to suggestions on refining this process. Is there a more efficient way to update these synchronized props when dealing with close events triggered by md-dialog?