[Vuejs]-Vuejs Component is not responding to "mouseleave" event

by

3👍

When you put an event listener on a component it will only be listening for events emitted by that component using $emit. So if you aren’t calling this.$emit('mouseleave') in your component that listener will never be called.

You could listen for the event internally and emit it but more likely what you’re looking for is the native modifier, which will attach DOM events directly onto the outermost element of the component:

@mouseleave.native="showComponent = false"

https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

Note that components differ from native HTML elements in this regard. What you did would have worked fine if you were using a <div> but it won’t work for a component.

👤skirtle

Leave a comment