MyComponent > Q-Modal or vice-versa?



  • Hi,

    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?

    OPTION A:

    MainView.vue
    <template>
        ... main view markup
        <my-options-modal>
        </my-options-modal>
    </template>
    
    MyOptionsModal.vue
    <template>
      <q-modal>
          ... modal content here
      </q-modal>
    </template>
    

    OPTION B:

    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?

    Thanks!



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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.