MyComponent > Q-Modal or vice-versa?
We are building a view component that needs a couple of medium-complexity modal dialogs for selecting options.
We are struggling to find a way to correctly encapsulate the logic for the modals in their own components: any advice?
MainView.vue <template> ... main view markup <my-options-modal> </my-options-modal> </template> MyOptionsModal.vue <template> <q-modal> ... modal content here </q-modal> </template>
MainView.vue <template> ... main view markup <q-modal> <my-options-modal-content> </my-options-modal-content> </q-modal> </template> MyOptionsModalContent.vue <template> ... modal content here </template>
Option A seems cleaner from the MainView point of view, but then the logic and code to open and close the modal is a bit too complex, because MyOptionsModal has to be a bridge between MainView and QModal.
Option B simplifies the opening/closing handling, but then the encapsulation is not so clean.
Any advice? Any best practices on how to create complex modals with logic inside?
benoitranque last edited by
Have you looked into using routes?
I would suggest option B. That way the modal content is independent of it’s container, whether that be a modal or a route.