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 😊 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? 😄


  • 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