Trigger-Geschwister Methode VUE JS

Question

Ich kann nicht herausfinden, wie in einer Komponente

Geschwister Methode auszulösen habe ich ein Verfahren wie diese

methods: { 
     closeModal: function(){ 
      function closeM(){ 
       $('.modal').css({opacity: 0 , 'visibility':'hidden'});  
      } 
      closeM(); 
     }, 

     closeOutside: function(){ 
      $(document).mouseup(function (e){ 
      var container1 = $('.modal__box'); 
      if (!container1.is(e.target) && 
      container1.has(e.target).length === 0) 
       { 
       this.$emit('closeModal',closeM()); 
       } 
      });  
     } 
    } 

meine Vorlage

    <div class="modal" @click="closeOutside()"> 
         <div class="modal__box z-depth-2 pr"> 
          <div class="modal__header"> {{header}} </div> 
          <i class="modal__close pa fa fa-times" @click="closeModal() "> </i> 
          <div class="modal__content"> 
           <slot> </slot> 
          </div> 
         </div> 
       </div> 

I Kann CloseModal nicht auslösen, fehlt mir etwas? ich bin irgendwie neu zu vue js, warum funktioniert es nicht? Vielen Dank!

Answer 1

In Vue werden alle Ihre Methoden an this gebunden, genau wie alle Daten und berechnet. So können Sie verwenden this.closeModal()

Edit: Ich habe eine Geige, die Ihnen den Einstieg erleichtern könnte. Achtung: Es handelt sich um eine komplette Überarbeitung Ihrer aktuellen Lösung, jedoch auf vue-Art.
Ich bin auch ziemlich neu in Vue, also fühlen Sie sich frei, es zu verbessern.

https://jsfiddle.net/DarkFruits/gr0j9s6x/

Answer 2

this.$emit('closeModal',closeM()); 

mit

this.$emit('closeModal',this.closeModal());