Level 5
$('#getModal')modal('hide')
Mar 18, 2017
7
Level 5
How do I hide and show a Bootstrap modal with Vue 2?
Hey, I'm trying to configure a Bootstrap modal inside my template (component) with VueJS.
Right now it's working via the normal usage of data-target and id.
This is what I got:
Square.vue:
<template>
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">
<!-- Modal -->
<div class="modal fade" id="getModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content size">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit colors and such..</h4>
</div>
<div class="modal-body text-center square-options">
<a href="#">
<p>Colors</p>
</a>
<hr>
<a href="#">
<p>Icons</p>
</a>
<hr>
<a href="#">
<p>URLs</p>
</a>
<hr>
<a href="#">
<p>Descriptions</p>
</a>
</div>
</div>
</div>
</div>
<div class="square">
<div class="pull-right white-link">
<a href="#" data-toggle="modal" data-target="#getModal">
<slot name="barsSlot"></slot>
</a>
</div>
<br><br>
<div class="square-icon text-center">
<a href="#" data-toggle="modal" data-target="#getModal">
<slot name="iconSlot"></slot>
</a>
</div>
<div class="URL white-link text-center">
<slot name="URLSlot"></slot>
</div>
<div class="description white text-center">
<slot name="descriptionSlot"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
};
</script>
How can I 'Vueify' this Bootstrap modal (show and hide)?
Level 1
Is this any other way than mixing bootstrap's scripts and vue ? it's so confusing :(
Level 52
:class="{ in: modalShown }"
data() {
return {
modalShown: false;
}
}
methods: {
toggleModal() {
this.modalShown = !this.modalShown;
}
}
Level 50
@Jake2315 Twitter Bootstrap fires several Jquery style events. You could hook into these assuming you add a ref="vuemodal" to your modal. i.e.
new Vue({
el:"#app",
data:{
// ...
},
methods:{
onHidden(){
// Stuff
}
},
mounted() {
$(this.$refs.vuemodal).on("hidden.bs.modal", this.onHidden)
}
})
However, I'd personally be looking at using some quality Vue Bootstrap components from the off. i.e. https://bootstrap-vue.js.org/docs/components/modal
1 like
Level 27
I know it's kind of a late reply. But in case that someone reaches this page as I did, there are some pretty cool alternatives...
https://wffranco.github.io/vue-strap/#getting-started
Plus the ones mentioned by @Artisan and @Robstar.
More info: https://github.com/vuejs/awesome-vue
Regards.
1 like
Please or to participate in this conversation.