Question

37

VueJS: why is this undefined?

rated 0 times [ 43] [ 6] / answers: 1 / hits: 60660 / 7 Years ago, fri, may 12, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tristani

Add To Favorites

Follow

Total Points: 318

Total Questions: 95

Total Answers: 106

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

tristani questions

1 Discord.js reply to interaction with only you can see this message

Tue, Dec 21, 21, 00:00, 3 Years ago

1 Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

Wed, Sep 1, 21, 00:00, 3 Years ago

1 How to change a variable value in react on button click

Wed, Nov 18, 20, 00:00, 4 Years ago

1 Skip first iteration during forEach loop

Fri, Aug 14, 20, 00:00, 4 Years ago

1 What is the correct folder structure for dynamic nested routes in Next.js?

Wed, Jul 15, 20, 00:00, 4 Years ago

View All

answered 7 Years ago lindsay · Accepted Answer

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);

}