Vue scope: how to delay handling of @mouseover
Have you tried using an arrow function in your setTimeout? It will maintain this.
data() { return { hovered: false }}methods: { trigger() { setTimeout(() => { this.hovered = true }, 1000) }}
<div @mouseover="activarOver" @mouseleave="resetOver "> eventos </div>data: () => { return { countMouseOver: 0 } },methods: { activarOver () { this.countMouseOver++ if (this.countMouseOver < 2) { this.setMostrarPopup() } console.log(this.countMouseOver) }, resetOver () { this.countMouseOver = 0 console.log('reset') },}
Implementation to show when hovered over for 1 second, then disappear when no longer hovered.
<span @mouseover="hover" @mouseleave="unhover">Hover over me!</span><div v-if="show">...</div>data() { return { show: false; hovering: false, };},methods: { hover() { this.hovering = true; setTimeout(() => this.show = this.hovering, 1000); }, unhover() { this.hovering = false; this.show = false; },}