javascript - Vue 范围 : how to delay handling of @mouseover

Question

所以我只想在用户将鼠标放在 div 上至少 1 秒时执行操作。内部模板:

<div @mouseover="trigger"></div>

内部脚本:

data() {
    return {
        hovered: false
    }
}

methods: {
    trigger() {
        setTimeout(function(){ this.hovered = true }, 1000)
    }
}

我的问题是我不了解 Vue.因为 this.hovered 在另一个函数中，所以它找不到实际悬停的数据变量。有什么解决方案？

Answer 1

您是否尝试过在 setTimeout 中使用箭头函数？它将维护 this。

data() {
    return {
        hovered: false
    }
}

methods: {
    trigger() {
        setTimeout(() => { this.hovered = true }, 1000)
    }
}