Reputation: 410
I can't figure out how to trigger a sibling method in one component
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>
How to trigger closeModal from closeOutside? I'm new to Vue.js.
Upvotes: 2
Views: 560
Reputation: 1125
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/
Upvotes: 1
Reputation: 628
this.$emit('closeModal',closeM());
replace with
this.$emit('closeModal',this.closeModal());
Upvotes: 0