web-dev-qa-db-fra.com

Gestion de l'événement de masquage modal Bootstrap dans Vue JS

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.

twitter-bootstrap-3vue.jsbootstrap-modalvuejs2
5
Arno van Oordt

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)
  }
})

Exemple de travail .

20
Bert

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">
3
yaroslawww

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>
2
retrograde