I am using Quasar framework for Vue.js and I have a form (q-form) in a Dialog (q-dialog) component. The dialog is persistent (persistent=True), but I want the persistency to be true only if the user modified any field of the form, so if no modifcation occured, the user can hode the dialog with clicking anywhere outside the Dialog. Is there a way to tell if the form was modified by user other than using onChange on each of the form's items?

I am using Quasar framework for Vue.js and I have a form (q-form) in a Dialog (q-dialog) component. The dialog is persistent (persistent=True), but I want the persistency to be true only if the user modified any field of the form, so if no modifcation occured, the user can hode the dialog with clicking anywhere outside the Dialog. Is there a way to tell if the form was modified by user other than using onChange on each of the form's items?

• vue.js
• vuejs3
• quasar-framework

• Depends on what you use on the frontend for the validations. I think that tools like VeeValidate have a "dirty" check globally on a form, but at the end of the day, it's kinda the same approach anyway. Also, I would personally trade that one VS any kind of 3rd party dependency any day. – kissu Commented Mar 3 at 15:04
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Mar 9 at 22:53

1 Answer 1

You can use onBlur instead of onChange if you don't wanna fire lots of events (or add debounce).

Creating a flag variable that turns true once the form data has been modified once is more than a fair approach. Maybe your fields have some sort of validation anyway? Extract the "formHasBeenModified" logic to a function and use it inside the onBlur/onChange handler. You can even skip it afterwards if the flag is true.