How to trigger sibling method in Vue.js

Question

Issue

I can't figure out how to trigger a sibling method in one component

Code

I have a methods like this

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

my Template

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

Question

How to trigger closeModal from closeOutside? I'm new to Vue.js.

Answer 1

In Vue, all your methods will be bound to this , just like any data and computed. So you can use this.closeModal()

Edit: I created a fiddle which might help you getting started. Caution: It is a complete rework of your current solution, however it is doing it the 'vue' way.
I am also quite a newcomer to vue, so feel free to improve it.

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

Answer 2

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

替换为

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