VueJS: why is “this” undefined?

by

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

More Related Contents:

  1. Vue.js dynamic images not working
  2. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  3. Communication between sibling components in Vue.js 2.0
  4. Vuex state on page refresh
  5. Vuejs and Vue.set(), update array
  6. [Vue warn]: Property or method is not defined on the instance but referenced during render
  7. How to watch store values from vuex?
  8. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  9. How to call function on child component on parent events
  10. How to listen for ‘props’ changes
  11. Accessing Vuex state when defining Vue-Router routes
  12. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  13. Vuejs typescript this.$refs..value does not exist
  14. How to install jQuery into Nuxt.js?
  15. Vue.js: Conditional class style binding
  16. Is there any way to ‘watch’ for localstorage in Vuejs?
  17. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  18. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  19. Access vue instance/data inside filter method
  20. Vue v-on:click does not work on component
  21. Methods vs Computed in Vue
  22. Passing props with programmatic navigation Vue.js
  23. Vue.js – update router view
  24. How to use Vuetify tabs with vue-router
  25. Force download GET request using axios
  26. Importing javascript file for use within vue component
  27. How to limit iteration of elements in `v-for`
  28. Detect Back Button in Navigation Guards of Vue-Router
  29. What’s the correct way to pass props as initial data in Vue.js 2?
  30. How to pass an object as props with vue router?

Leave a Comment