Existe-t-il un moyen convenable dans Vue (2) de gérer un événement de masquage modal Bootstrap (3)?
J'ai trouvé cela d'une manière JQuery mais je ne peux pas comprendre comment capturer cet événement dans Vue:
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
Ajouter quelque chose comme v-on:hide.bs.modal="alert('hide')
ne semble pas fonctionner.
Bootstrap utilise JQuery pour déclencher l'événement personnalisé hidden.bs.modal
afin qu'il ne soit pas facilement capturé par Vue (qui, je crois, utilise des événements natifs sous le capot).
Comme vous devez avoir JQuery sur une page pour utiliser le modal natif de Bootstrap, utilisez simplement JQuery pour le récupérer. En supposant que vous ajoutiez un ref="vuemodal"
à votre modal Bootstrap, vous pouvez faire quelque chose comme ceci.
new Vue({
el:"#app",
data:{
},
methods:{
doSomethingOnHidden(){
//do something
}
},
mounted(){
$(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden)
}
})
Veuillez consulter https://bootstrap-vue.js.org/docs/components/modal#overview Vous pouvez y trouver l'événement "hide" ou "hidden" .__
<b-modal ref="someModal" @hide="doSometing">
Une option consiste à le lier à une variable:
data: function(){
return {
showModal: false
//starts as false. Set as true when modal opens. Set as false on close, which triggers the watch function.
},
watch: {
showModal: function(){
if(this.showModal == false){
// do something
},
}
HTML
<button id="show-modal" @click="showModal = true">Show Modal</button>
//later if using a component
<modal v-if="showModal" @close="showModal = false">
// or alternatively in the bootstrap structure
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click="showModal = false">Close</button>
</div>