$裁判是不確定的，當window.addEventListener（「專注」）是被解僱

Question

<template> 
    <div> 
    <input ref='commandLine' /> 
    </div> 
</template> 

<script> 
export default { 
    mounted() { 
    window.addEventListener('focus', this.pageFocused) 
    }, 
    methods: { 
    pageFocused:() => { 
     console.log('pageFocused') 
     console.log(this) 
     this.$refs.commandLine.focus() 
    } 
    } 
} 
</script> 

我想將焦點設置commandLine輸入每次用戶進入我的應用程序。不幸的是，當我嘗試使用$refs來查找我的<input>對象時，它爲空。

我懷疑這是因爲window.addEventListerer將我的函數放到不同的上下文中，所以this變量不代表我的組件。

什麼是解決它的乾淨方法？

Answer 1

不要用箭頭函數定義方法。在箭頭函數this是詞法綁定，並不會指向Vue。

methods: { 
    pageFocused(){ 
    console.log('pageFocused') 
    console.log(this) 
    this.$refs.commandLine.focus() 
    } 
} 

見VueJS: why is 「this」 undefined?

我懷疑這是因爲window.addEventListerer把我的功能 到不同的環境，所以這個變量並不代表我 組件。

Vue將方法綁定到Vue對象，以便特定的代碼可以正常工作。但是，您不能綁定箭頭功能。因此，你的問題。