چگونه میتوانیم یک Bootstrap Modal را با vuejs نمایش داد؟ در حالت عادی میتوان مودال را باز و بسته کرد اما زمانی کی در داخل فایل .vue قرار دهیم نمی توانیم Bootstrap Modal را باز و بسته کرد.
پیشنهاد میکنم شما تویی 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 >×</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
}
});
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟