Estoy creando un componente con Vue.js.
Cuando hago referencia a this en cualquiera de los ganchos del ciclo de vida ( created , mounted , updated , etc.) se evalúa como undefined :
mounted: () => { console.log(this); // logs "undefined" },Lo mismo también está sucediendo dentro de mis propiedades calculadas:
computed: { foo: () => { return this.bar + 1; } }Obtuve el siguiente error:
TypeError no capturado: no se puede leer la propiedad 'barra' de indefinido
¿Por qué this evaluación es undefined en estos casos?
Ambos ejemplos usan una función de flecha () => { } , que vincula this a un contexto diferente de la instancia de Vue.
Según la documentación :
No use funciones de flecha en una propiedad de instancia o devolución de llamada (por ejemplo,
vm.$watch('a', newVal => this.myMethod())). Como las funciones de flecha están vinculadas al contexto principal,thisno será la instancia de Vue como cabría esperar ythis.myMethodno estará definido.
Para obtener la referencia correcta a this como la instancia de Vue, use una función regular:
mounted: function () { console.log(this); }Alternativamente, también puede usar la abreviatura ECMAScript 5 para una función:
mounted() { console.log(this); }Está utilizando funciones de flecha .
La documentación de Vue establece claramente que no se deben usar funciones de flecha en una propiedad o devolución de llamada.
A diferencia de una función normal, una función de flecha no vincula this . En cambio, this está ligado léxicamente (es decir, mantiene this significado de su contexto original).
var instance = new Vue({ el:'#instance', data:{ valueOfThis:null }, created: ()=>{ console.log(this) } });Esto registra el siguiente objeto en la consola:
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
Considerando que... Si usamos una función regular (que deberíamos en una instancia de Vue)
var instance = new Vue({ el:'#instance', data:{ valueOfThis:null }, created: function(){ console.log(this) } });Registra el siguiente objeto en la consola:
hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}
Si desea seguir usando la función de flecha, puede pasar la instancia del componente ( this ) como parámetro como:
computed: { foo: (vm) => { //vm refers to this return vm.bar + 1; } }