Best way to manage modals forms

  • Dear Quasarians !

    In my project I have some forms in q-modal (ex: for user edit profile)

    Actually I manage modals as below:

    Modal that don’t need any return : (ex: Edit User Profile)

    • I create a component modalEditUser.vue who contain a q-modal and all my inputs form inside
    • I declare an open() method inside my modalEditUser.vue
    • From my parent page, I declare the modalEditUser component and I call open() with this.$ when I need to open it.
    • Inside component the user is loaded from open() method (I call the user from ajax API)
    • When the modal is validated, I check for fields validation and post on API then I close the modal (this.$refs.xxxx.close())

    Modal that need to return an object to parent : (ex: an Invoice item return to Invoice parent)

    • I create a component modalEditItem.vue who contain a q-modal and all my inputs form to edit the item (price, ref, VAT etc…)
    • I declare an open() method who contain an item object in parameter : open(item)
    • I declare props OnReturnItem who is function and return the edited item if the modal is validated
    • From my Invoice parent, I declare the modal component and I call it with open(itemToEdit)
    • When user click to the Save button in modal, the modal close and call OnReturnItem function
    • In this case, I can use OnReturnItem from parent page (Invoice) to manage my edited item from modal (ex: add it in items array etc…)

    I think there is a better solutions to manage modals from parent but… yeah, that is the question :blush: What do you think about ?


  • It depends what you mean by better way… If you mean you have a lot of modals and it is getting messy, use subroutes. You can add props and event listeners on your router-view

  • Dear Quasarers !

    Hehe…maybe Quasarians sounds better? :smile:


  • Admin

    Hi, like Benoit said, better use sub-routes. Any specific reason to use Modals? Also, have you thought about using Vuex for state management?

  • Another way: you could treat the whole modal as an input. Pass a v-model to the modal and follow the protocol to signal its change (this.emit('input', value)), see the vue.js section on custom inputs

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.