Global Modal with Vue 3 + Bootstrap + Pinia – Javascript

I have made a ModalComponent.vue file which I want to reuse everywhere. The modal has slots for the title, body and footer. It has a standard close modal button, which works fine.

I want to have another button next to it, to do calls to my Pinia stores.

So for example, I have a table with items. I want to delete one item. I click the trash can icon and the modal opens (this works for the specific item).

Inside the modal, I have the confirm button which can be different for every table (Save, Continue, Delete etc).

So now, I want the specific item to be deleted. Click the button in the component, the store is called and correctly removes the item (I see it happening in the table underneath the backdrop).

Now I want the modal to close. So after the store call, I want the modal to close. I have tried everything under the sun, but it is not closing.

I tried to put dataModal.value to false, nothing happens or just the backdrop remains. I tried emitting an event from the Pinia store, nothing. No error, no console.logs..

How can I make this happen?

Here is my ModalComponent.vue:

    <template>
      <div id="myModal" class="modal fade" ref="myModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="myModalLabel">
                <slot name="title"></slot>
              </h5>
              <button type="button" class="btn-close" @click="hideModal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <slot name="body"></slot>
            </div>
            <div class="modal-footer">
              <Button :content='$t("buttons.cancel")' variant="btn-danger" icon="x-lg" :circle="false" @click="hideModal" />
              <slot name="button"></slot> // here is where the dynamic button will be placed
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script setup>
    import { Modal } from 'bootstrap';
    import Button from '@/components/Buttons/Button.vue';
    import { watchEffect, onMounted, ref } from 'vue'
    
    const props = defineProps({
      showModal: {
        type: Boolean,
        default: false
      }
    });
    
    const modalInstance = ref(null);
    
    onMounted(() => {
      modalInstance.value = new Modal(document.getElementById('myModal'), {
        target: "#myModal",
        backdrop: "static"
      });
    });
    
    watchEffect(() => {
      if (props.showModal === true && modalInstance.value) {
        modalInstance.value.show();
      }
    });
    
    const emit = defineEmits('close-modal');
    
    function hideModal() {
      if (modalInstance.value) {
        modalInstance.value.hide();
        emit('close-modal');
      }
    }
    
    </script>

Here is the component that loads in the component and the table:

<template>

    <modal-component @close-modal="dataModal = false" :showModal="dataModal" @item-deleted="dataModal = false">
      <template v-slot:title>
        {{ $t('itemTitle') }}
      </template>
      <template v-slot:body>
        {{ $t('itemBody') }}
      </template>
      <template v-slot:button>
        <Button :content='$t("buttons.delete")' variant="btn-secondary" icon="trash-fill" :circle="false" @click="onDelete" />
      </template>
    </modal-component>

    <Table />
</template>

<script setup>

import Button from '@/components/Buttons/Button.vue'

import ModalComponent from '@/components/ModalComponent'

import { computed, ref, watch, onMounted } from 'vue'
import { useItemsStore } from '@/stores/store-items'
import { storeToRefs } from 'pinia'


const { getItems, addItems, removeItems, updateItems } = useItemsStore()

const { isLoading, items } = storeToRefs(useItemsStore())

getItems()

const dataModal = ref(false)

function onDelete(){
  removeItems(itemToBeDeleted.id) // <-- call to the store
  getItems(); 
}

</script>

And here is my Pinia store file:

import { defineStore } from "pinia";
import { apiClient } from "@/services/api-client";
import mitt from 'mitt'

const emitter = mitt()


export const useItemsStore = defineStore('ItemsStore', {
    state: () => {
        return {
            items: [],
            isLoading: false
        }
    },
 
    actions: {
        
        async removeItems(id) {
            this.isLoading = true;
            
            return apiClient.RemoveItem({id:id})
                .then(response => {
                    // if(!hasError(dispatch, commit, response)){
                        let index = 0;
                        for(let i=0; i < this.items.length; i++){
                            if(this.items[i].id === id){
                                index = i;
                            }   
                        }
                    
                        this.items.splice(index, 1);
                        this.isLoading = false;

                        emitter.emit('item-deleted')

                        return response.succes
                    // }
                    //
                    // return false;
                })
        }
    }
})