Best way to manage modals forms

[damosse31]

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 ?

Regards
Dams

[benoitranque]

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

[s.molinari]

Dear Quasarers !

Hehe…maybe Quasarians sounds better?

Scott

[rstoenescu]

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

[afd]

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