Any way to abort hide on q-dialog?

Question

I'm trying to build a confirmation modal into a dialog containing form inputs, so i can notify the user that his changes will be lost if he closes without saving. This means displaying the modal every time the user has made changes to the input values and tries to quit the dialog (via click outside/escape button/close button). Now if the user decides to go back and save his changes i'll have to prevent the hide event which has been fired.

The dialog is invoked via the quasar plugin.

I already tried using the @before-hide event listener to listen for and prevent the hide event but there is no event emitted.

Any other way to do it?

Answer 1

The event you can use to stop the dialog from closing is @update:model-value which is called whenever the v-model value changes. By setting the v-model back to true in the callback, the dialog will not close.

I made a proof-of-concept in stackblitz using the QDialog component. It may not match your exact business logic but hopefully it's enough to help you. If not, let me know.

<q-dialog v-model="dialog1" @update:model-value="checkForSave">

const checkForSave = () => {
  // if user has saved, allow close to happen
  if (saved.value) return;
  else {
    //keep current dialog open
    dialog1.value = true;
    //open second dialog letting user know they haven't saved
    dialog2.value = true;
  }
};