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.$refs.myComponentRef.open() 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?
Hi, like Benoit said, better use sub-routes. Any specific reason to use Modals? Also, have you thought about using Vuex for state management? http://quasar-framework.org/guide/components-sharing-state.html
Another way: you could treat the whole modal as an input. Pass a
v-modelto the modal and follow the protocol to signal its change (
this.emit('input', value)), see the vue.js section on custom inputs