باز و بسته کردن Bootstrap Modal توسط vuejs

پیشنهاد میکنم شما تویی vue از لینک زیر بوتسرپ vue استفاده کنی
https://bootstrap-vue.js.org/docs/components/modal/

موسوی عزیز @juza66 پروژه قبلا با Bootstrap 4 نوشته شده، ایا کدام راهی دیگر وجود دارد کی بتوانیم این مشکل را هندل کنیم؟

سلام خسته نباشی با یه دستور v-if راحت می تونی هندلش کنی که اگه رو اون دکمه مورد نظر کلیک شد مودال مورد نظر نمایش داده بشه

می تونی از این لینک زیر هم استفاده کنی استفاده کردنش هم راحته فقط شما ازش الگو بگیر چکار کرده.

https://vuejs.org/v2/examples/modal.html

نمونه کد

<div id="root">
    <button class="btn" @click="showModal=true">Show</button>
     <modal v-if="showModal" @close="showModal = false" name="Umesh">
            <p>dsfkdskf</p>
     </modal>

</div>

کد css

.modal-active{
    display:block;
}

کد vue

Vue.component("modal",{
    props:['name'],
    template:`
        <div class="modal fade in modal-active">
            <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" @click="$emit('close')" class="close"><span >&times;</span></button>
                            <h4 class="modal-title">
                                {{name}}
                            </h4>
                        </div>
                        <div class="modal-body">
                                <slot></slot>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" @click="$emit('close')">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                </div>
            </div>
        </div>`
})

new Vue({
    el:"#root",
    data:{
        showModal:false
    }
});