After creating a ModalComponent.vue file that I intend to use across different sections, I encountered an issue with closing the modal after calling my Pinia stores. The modal includes slots for the title, body, and footer, along with a standard close button that functions correctly.
My goal is to add another button next to the close button to interact with my Pinia stores. For instance, when deleting an item from a table by clicking on the trash can icon, the corresponding modal opens, displaying confirmation options like Save, Continue, or Delete.
Once I trigger the deletion of the specific item by interacting with the component's button connected to the store, I expect the item to be removed successfully (which is visually confirmed in the table underneath the backdrop) followed by automatically closing the modal. However, despite various attempts, including setting dataModal.value to false and emitting events from the Pinia store, the modal does not close as intended.
If you have any insights or suggestions on how to achieve this functionality seamlessly, please share them. Your expertise will be greatly appreciated!
To provide context, here is an excerpt from my ModalComponent.vue:
<template>
<!-- ModalComponent content -->
</template>
<script setup>
// ModalComponent script setup
</script>
Additionally, here is a snippet showcasing the usage of the modal component within a larger component that includes a table:
<template>
<!-- Component code using the modal -->
</template>
<script setup>
// Component script setup
</script>
Lastly, here is a glimpse into the implementation of my Pinia store functionality:
// Pinia store definition