Sometimes, we want to detect mouseover or hover with Vue.js.
In this article, we’ll look at how to detect mouseover or hover with Vue.js.
How to detect mouseover or hover with Vue.js?
To detect mouseover or hover with Vue.js, we can listen for the mouseover and mouseleave events.
For instance, we write
<template>
<div @mouseover="upHere = true" @mouseleave="upHere = false">
<h2>Something</h2>
<some-component v-show="upHere"></some-component>
</div>
</template>
<script>
//...
export default {
//...
data() {
return {
upHere: false,
};
},
//...
};
</script>
to listen to the mouseover and mouseleave events triggered from the div with @mouseover and @mouseleave.
We set upHere to true if the mouse pointer is in the div and we set upHere to false when the mouse pointer leaves the div.
And we add the upHere reactive property to the object returned by data.
Conclusion
To detect mouseover or hover with Vue.js, we can listen for the mouseover and mouseleave events.
