$ Refs ist nicht definiert, wenn window.addEventListener (‚Focus‘) wird gefeuert

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> 

I Fokus auf commandLine Eingang jedes Mal Benutzer erhalten in meine App festlegen möchten. Leider, wenn ich versuche, $refs zu verwenden, um mein <input> Objekt zu finden, ist es Null.

Ich vermute, dass es, weil window.addEventListerer meine Funktion in anderen Kontext setzt, so dass this Variable nicht meine Komponente darstellt.

Was ist ein sauberer Weg, um es zu lösen?

Answer 1

Definieren Sie keine Methoden mit Pfeilfunktionen. In den Pfeilfunktionen this ist lexikalisch gebunden und wird nicht auf den Vue zeigen.

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

Siehe VueJS: why is “this” undefined?

Ich vermute, dass es ist, weil window.addEventListerer meine Funktion in anderen Kontext stellt, so wird diese Variable stellt nicht meine Komponente.

Vue bindet Methoden an das Vue-Objekt, so dass bestimmter Code normalerweise funktioniert. Sie können jedoch keine Pfeilfunktion binden. Also, dein Problem.