Display multiple modals on a single page using useModal

[Th3lios]

Hello, I am trying to display multiple modals on a single page using the useModal hook in Vue.js. However, I have not been able to get it to work properly.

Here is what I have tried so far:

<script setup>
import { InsuranceModal, ConsumerModal } from './components/modals';

const modals = {
  InsuranceModal,
  ConsumerModal
};

const currentModal = ref('InsuranceModal');

const globalModal = useModal({
  component: modals[currentModal],
  attrs: {
  onHide {
     close()
   }
 }
});

const showModalByName = (modalName) => {
  currentModal.value = modalName;
  globalModal.open();
}
</script>

However, this code only displays the backdrop and not the actual modal.

Can anyone suggest a solution to this issue? I have not been able to find this specific case in the documentation. Thank you!

[hunterliu1003]

@Th3lios useModal() can only define one modal each time, so you have to execute useModal() multiple times if you want to create multiple modals.

import { InsuranceModal, ConsumerModal } from './components/modals';

const modals = {
  InsuranceModal,
  ConsumerModal
};

function showModalByName (modalName) {
  const { open } = useModal({
    component: modals[modalName],
    attrs: {
    onHide {
       close()
     }
   }
  });
  open()
}