Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS: why is "this" undefined?

I'm creating a component with Vue.js.

When I reference this in any of the the lifecycle hooks (created, mounted, updated, etc.) it evaluates to undefined:

mounted: () => {
  console.log(this); // logs "undefined"
},

The same thing is also happening inside my computed properties:

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

I get the following error:

Uncaught TypeError: Cannot read property 'bar' of undefined

Why is this evaluating to undefined in these cases?

like image 836
thanksd Avatar asked May 12 '17 05:05

thanksd


People also ask

Why this is undefined inside function?

A variable that has not been assigned a value is of type undefined . A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned. Let's try to understand by a simple example.

What is this in Vue?

The this keyword within Vue gives you easy access to all of your data and functionalities. Wether you want to access a data property, a computed property, a component prop or a function, you can all find them directly on the this keyword.

Is not defined in Vue JS?

Uncaught ReferenceError: $ is not defined This is error is most of the time related to not having installed Jquery or not having it declared properly. You may need to do require('jquery').


2 Answers

Both of those examples use an arrow function () => { }, which binds this to a context different from the Vue instance.

As per the documentation:

Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

In order to get the correct reference to this as the Vue instance, use a regular function:

mounted: function () {
  console.log(this);
}

Alternatively, you can also use the ECMAScript 5 shorthand for a function:

mounted() {
  console.log(this);
}
like image 181
thanksd Avatar answered Oct 18 '22 22:10

thanksd


You are using arrow functions.

The Vue Documentation clearly states not to use arrow functions on a property or callback.

Unlike a regular function, an arrow function does not bind this. Instead, this is bound lexically (i.e. this keeps its meaning from its original context).

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: ()=>{
    console.log(this)
  }
});

This logs the following object in the console:

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

Whereas... If we use a regular function (which we should on a Vue instance)

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: function(){
    console.log(this)
  }
});

Logs the following object in the console:

hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}

like image 17
Ashutosh Narang Avatar answered Oct 18 '22 22:10

Ashutosh Narang