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?
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.