'This' object inside vue instance methods is undefined

[CaptainYouz]

Hi !

I have also tested on the browserify vuejs-templates and i have the same error.
I followed the README and have set up a new project using vue-cli browserify, but when i'm trying to reach the 'this' object inside vue instance method (created, beforeCompile...), it always return undefined into the console.

Here is an example when i modify the script part of the App.vue file (it's the only one that i modified).

export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello Vue!'
    }
  },
  created: () => {
    console.log('created', this);
  },
  beforeCompile: () => {
    console.log('beforeCompile', this);
  },
  compiled: () => {
    console.log('compiled', this);
  },
  ready: () => {
    console.log('ready', this);
  }
}

On each log, this is undefined.

I'm am missing something ?

Configuration: Macbook Pro on Chrome v50.0.2661.75 (64-bit)

[chrisvfritz]

@CaptainYouz This happens because the ES6/2015 arrow function syntax (() => {}) binds this to the parent context. In this case, the parent context is the module. Since this is undefined in the module context, that undefined value is passed to each of the lifecycle methods instead of the view model as you'd expect.

To fix this, you'll need to use a normal function declaration:

created: function () {
  console.log('created', this);
},

Or, my personal preference is the ES6/2015 shorthand, which does the same as above:

created () {
  console.log('created', this);
},

[CaptainYouz]

Thanks for the explanation !
It's working now 👍 .

[jgb-solutions]

great!

[taoliujun]

but this is still link methods.but not vm.

[imageslr]

Thanks a lot!!!

[theluk]

how are you dealing with methods you need to bind to this. for example when you want to wrap a method in lodash´s debounce?

[chrisvfritz]

@theluk You don't need to do anything special. Just wrapping the function with debounce should work, e.g.:

myMethod: debounce(
  function () {
    // `this` is the app/component instance here
  },
  500
)