I often make all dialogs as a single file component (SFC). Then there are a couple of problems that I come across, but there are solutions to those so nothing to worry.
First is when rendering the component use a v-if. For props as well as the source of the dialog which makes the dialog appear and disappear. It helps solve an important issue.
1 2 3 4 | <dialog-add-edit-device-name :params="addEditDeviceDialogParams" v-if="editUserNameParent && editUserNameCategoryParent && addEditDeviceDialog" ></dialog-add-edit-device-name> |
When inside a component (SFC), VDialog (v-dialog) does not render mounted each time. Only the first time. We are having v-if (on the v-dialog model) here so that makes mounted run each time but there are more reasons to have v-if as well (but I don’t remember 🙁 ). Otherwise we could also run into an issue where the dialog opens fine only once. This could happen if we are reading from props and assigning it to a data property inside mounted, since mounted runs only once and when clicked outside, if we do not make the data property false, it would not open the dialog again. Solution to this is mentioned below.
It is important for me to allow escape or outside click but that was resulting a bug with opening multiple dialogs.
For the following code please notice the
1 | @keydown.esc |
1 | @click.outside |
1 2 3 4 5 6 7 | <v-dialog v-model="$props.params.addCategoryDialog" transition="dialog-bottom-transition" max-width="600px" @keydown.esc="closeAddCategoryDialog()" @click:outside="closeAddCategoryDialog()" ></v-dialog> |
Please note the above learnings are in context of Vue 2 and not Vue 3.
