Vueスコープ：@mouseoverの処理を遅らせる方法

Question

私は少なくとも1秒間ユーザがdivにマウスを持っている場合にのみアクションを起こしたいと思います。スクリプト内

<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) 
    } 
}