Vue method showing as undefined

it methods, change de name property

Your VueJS app doesn't work, and you get an error that says:

this is undefined

The first way is less common in Vue components, because it's a bit longer to write out:

methods: {
  regularFunction: function() {
    // Do some stuff
  }
}

The second way is the shorthand function, which is probably more familiar to you:

methods: {
  shorthandFunction() {
    // Do some stuff
  }
}

This is what they look like on a Vue component:

methods: {
  arrowFunction: () => {
    // Do some stuff
  }
}

If you try to access this from inside of an arrow function that's on a Vue component, you'll get an error because this doesn't exist!

data() {
  return {
    text: 'This is a message',
  };
},
methods: {
  arrowFunction: () => {
    console.log(this.text);  // ERROR! this is undefined
  }
}

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

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

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

[skip ci] update function syntax as es6. no array functions, just upd… … 2806a0e

…ate syntax on ES6

vuejs-templates/browserify-simple#6