MyComponent > Q-Modal or vice-versa?

[javierabadia]

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!

[benoitranque]

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.