Poignée modal Bootstrap événement masquer dans la Vue JS

Est-il une manière décente en Vue (2) pour gérer un Bootstrap (3) modal cacher?

J'ai trouvé ce que JQuery façon, mais je ne peux pas comprendre comment capturer cet événement en Vue:

$('#myModal').on('hidden.bs.modal', function () {
  //do something…
})

Y ajoutant quelque chose comme v-on:hide.bs.modal="alert('hide') ne semble pas fonctionner.

OriginalL'auteur Arno van Oordt | 2017-02-28

  1. 20

    Bootstrap utilise JQuery pour déclencher l'événement personnalisé hidden.bs.modal de sorte qu'il n'est pas facilement attrapé par Vue (qui, je crois utilisant les événements sous le capot).

    Puisque vous avez JQuery sur la page à utiliser Bootstrap natif du modal, il suffit d'utiliser JQuery pour l'attraper. En supposant que vous ajoutez un ref="vuemodal" à votre modal Bootstrap vous pouvez faire quelque chose comme cela.

    new Vue({
  el:"#app",
  data:{
  },
  methods:{
    doSomethingOnHidden(){
      //do something
    }
  },
  mounted(){
    $(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden)
  }
})

    Exemple de travail.

    J'avais espéré un nettoyant (sans jquery) solution mais c'est probablement ce que je vais l'utiliser jusqu'à ce que quelque chose de mieux s'affiche 😉
    FYI - Si vous arrive d'avoir une autre Vue de la balise qui fait de cette ref="vuemodal" s'affiche pas, il ne sera pas affiché dans votre $refs. L'objet avec la ref="" doit être rendue, afin de travailler.
    cela ne fonctionne pas sur moi.

    OriginalL'auteur Bert

  2. 4

    Veuillez voir https://bootstrap-vue.js.org/docs/components/modal#overview
    De là, vous pouvez trouver l'événement "cacher" ou "caché"
    De sorte que vous pouvez lier cet événement:

    <b-modal ref="someModal" @hide="doSometing">
    Comment peut-toute autre réponse votes?!?
    Merci @yaroslawww

    OriginalL'auteur yaroslawww

  3. 2

    Une option est de 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>

    OriginalL'auteur retrograde