Feature request - Programatically close q-dialog from within

[stefaanMLB]

When a q-dialog is used within a child component and used in a parent component the v-close-popup directive allows to close the dialog from within the child component as shown in the code below. Luckily the @click handler is executed while the dialog data is still valid.

It would be nice to be able to close the dialog programmatically at the end of the @click handler instead of using the v-close-popup directive because that emphasizes the programmatic logic of executing the code first and closing the dialog after that.
The v-close-popup directive is kind of "spooky action on a distance"

<q-btn btn-text="Accept" @click="handleAccept" v-close-popup />
<q-btn btn-text="Cancel" v-close-popup />

[ivanjaros]

You just toggle the v-model of the dialog in your click handler to close. It's quite simple.

[stefaanMLB]

Sorry for my ignorance, but how can I access the v-model from within the dialog in a setup script ?

[ivanjaros]

if you're trying to close it(parent) from imported component(child), then simply emit event, catch it in the parent and simply close it.

[stefaanMLB]

That seems to me like opening the car door from within by opening the window and reaching for the outside handle.

[ivanjaros]

That seems to me like opening the car door from within by opening the window and reaching for the outside handle.

it's a standard vue way to communicate with the parent. there is no bidirectional communication between parent and child. it is one way, from parent to child. events are used to talk to the parent. this is nothing new.

[ivanjaros]

technically, though, you could wrap the model for the dialog into object and pass that object to the child. objects and arrays are mutable by children, even though it bypasses the vue principles completely but because monitoring changes in objects and arrays would take too much resources, it is not done so. and both are pointers, so technically you can mutate props this way, even though it is highly discouraged. just in case you do not want to implement events and just want to get it done asap and have a niche use case where this is ok.

[stefaanMLB]

So this is also how the v-close-popup works ? By emitting a message to the parent object ?

[ivanjaros]

yep. i have not tested it but you could try to use it in your child component, it might propagate to the parent dialog so you won't have to do any work yourself. logically it should, because i think dialog stops propagation of this event in case of dialog within dialog to avoid closing the wrong parent(dialog).