Bootstrap 5's Modal Does Not Fade with Vue 2

apkr x 0
Viewed 26

I have a pop-up modal that is being called by another componenent, however, when clicked, it does not show the dialog, only the overlay is visible. Basically, It's not changing from "modal fade" to "modal show" automatically as it does with bootstrap.

This is the modal component:

<template>
    <div>
        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close" @click="$emit('close')">&times;</span>
                <div class="modal-header">
         

                    <p>{{ title }}</p>
                </div>
                <div class="modal-body">
                  
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

which is called by another component in this way:

<template>
    <div class="box">
        <div>
            <a
                id="myBtn"
                @click="showModal = true"
                :href="javascript:;"
            >
                <div class="grid">
                    <p
                        class="mosiac_title"
                    >
                        {{ title }}
                  
                    </p></div
            ></a>
        </div>

        <!-- overlay -->
        <div
            class="p_overlay"
            v-if="showModal"
            @click="showModal = false"
        ></div>
        <PopUpModal
            v-show="showModal"
            @close="showModal = false"
            :title="title"
        >
            <slot></slot>
        </PopUpModal>
    </div>
</template>

script>
import PopUpModal from "./PopUpModal.vue";

export default {
    props: ["title", "link"],
    mounted() {
        console.log("Box mounted.");
    },
    components: {
        PopUpModal,
    },
    data() {
        return {
            showModal: false,
        };
    },
   
};
</script>
bootstrap-modal vuejs2 bootstrap-5 vue.js
1 Answers

Please add this in modal component in mounted:

mounted:function(){

   $('#myModal').modal('show');
}



<script>


export default {
   
    mounted() {
       $('#myModal').modal('show');
    },
   
   
};
</script>

with showModal= true the modal is added into the dom. but you need to show modal when it is mounted. Please make sure to hide this too on destroy component.

  <PopUpModal
        v-show="showModal"      // Change this to v-if
        @close="showModal = false"
        :title="title"
    >
        <slot></slot>
    </PopUpModal>
Neha0
Related