why i get, Cannot set property of undefined

Question

I'm working on small project using nuxt js and axios and i try to put the response data in my formFields object but i get undefined error message in the console, since i have already declared formFields in data as you can see :

this is my code :

editCustomers (customerId, submit = false) {
  this.editMode = true
  this.customerId = customerId
  if (submit === 1) {
    // this.$Progress.start()
    this.$axios.$post('mydomain.com' + customerId + '/1', $('#add-customer').serialize()).then(function (data) {
      this.validation(data)
      // another form validation again using the helper
      this.refresh = true
    })
    // this.$Progress.finish()
  } else {
    this.$axios.$get('mydomain.com' + customerId).then(function (data) {
      this.formFields = data.customers[0]
    })
  }
}

my data variables :

data () {
return {
  laravelData: {},
  formFields: {},
  search: null,
  editMode: true,
  customerId: null,
  refresh: false
}
 }

as you can see i have already declared data, but when i do this.formFields = data.customers[0] i get this error message :

Uncaught (in promise) TypeError: Cannot set property 'formFields' of undefined

Likely because your code runs in strict mode where `this` in a *normal function call* is `undefined`. What do you expect `this` to refer to? Have a look at [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/218196) — Felix Kling, Dec 02 '19 at 22:20
Every time you enter a new function the value of `this` changes. If you replace your callback functions with arrow functions the outer `this` value will be preserved. So change `function (data) {` to `data => {`. — skirtle, Dec 02 '19 at 22:21
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Heretic Monkey, Dec 02 '19 at 22:24

score 4 · Accepted Answer · answered Dec 02 '19 at 22:24

Just change this part:

this.$axios.$get('mydomain.com' + customerId).then(function (data) {
  this.formFields = data.customers[0]
})

To this:

this.$axios.$get('mydomain.com' + customerId).then((data) => {
  // Now you can access your class instance
  this.formFields = data.customers[0]
})

gabriel.hayes · Answer 2 · 2019-12-02T22:45:00.170

In JavaScript, this refers to the current target of the current scope, when using the function keyword to declare a function, this refers to the object with which the function is invoked.

The way you have written your code, this no longer refers to the Vue instance, this refers to undefined (because the callback is presumably invoked without a this arg), try capturing this outside of the function and enclosing it in its closure:

editCustomers (customerId, submit = false) {
  this.editMode = true
  this.customerId = customerId
  const vm = this; // vm = this = Vue instance
  if (submit === 1) {
    // this.$Progress.start()

    this.$axios.$post('mydomain.com' + customerId + '/1', $('#add-customer').serialize()).then(function (data) {
      // vm = Vue instance; this = undefined
      vm.validation(data)
      // another form validation again using the helper
      vm.refresh = true
    })
    // this.$Progress.finish()
  } else {
    this.$axios.$get('mydomain.com' + customerId).then(function (data) {
      // vm = Vue instance; this = undefined
      vm.formFields = data.customers[0]
    })
  }
}

ETA: For a better understanding of this:

function myName() { return this.name};
var obj = {name:'test'};
var objName = myName.bind(obj); // a new function where the `this` arg is bound to `obj`
var text = objName(); // text === 'test'
console.log(text);

why i get, Cannot set property of undefined

2 Answers2