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

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

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

内部脚本:

data() {
    return {
        hovered: false
    }
}

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

我的问题是我不了解 Vue 的范围。因为 this.hovered 在另一个函数内，它没有找到实际悬停的数据变量。解决这个问题的方法是什么？

最佳答案

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

data() {
    return {
        hovered: false
    }
}

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

关于javascript - Vue 范围 : how to delay handling of @mouseover，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45462517/