Vue範圍：如何延遲@mouseover的處理

所以我想要一個動作，只有當用戶的鼠標在div至少1秒。內模板：Vue範圍：如何延遲@mouseover的處理

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

內部腳本：

data() { 
    return { 
     hovered: false 
    } 
} 

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

我的問題是，我不明白Vue公司的範圍。因爲這個參數在另一個函數中，所以沒有找到實際的數據變量。有什麼解決方案？

來源

2017-08-02 Hillcow

'this'引用setTimeout函數。 'var self = this;'setTimeout之前將通過'self'變量訪問嵌套函數中的vue –

請注意，這不會解決您的整體問題。當用戶懸停在div上時，setTimout將一直執行。您需要測量在按鈕上花費的時間，並在發生onmouseout事件時取消。 –

[如何在回調中訪問正確的\'this \']（https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback）） – Bert

您是否嘗試過在您的setTimeout中使用箭頭功能？它將保持this。

data() { 
    return { 
     hovered: false 
    } 
} 

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

來源

2017-08-02 13:41:02

非常感謝你，它的工作！我學會了如何使用Bert的這一點。 – Hillcow

Vue範圍：如何延遲@mouseover的處理

回答

相關問題