Why do I keep receiving the error message "Cannot set property of undefined"?

Question

Why do I keep receiving the error message "Cannot set property of undefined"?

In the midst of a small project that involves utilizing nuxt, js, and axios, I encountered an issue when attempting to assign the response data to my formFields object. Despite having declared formFields within the data section, I kept receiving an error message stating 'undefined' in the console. Here is a snippet of my code:

Code snippet:

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

Variables in my data section:

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

Despite correctly declaring the data variables, the assignment

this.formFields = data.customers[0]

resulted in the following error message:

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

javascript vue.js nuxt.js

Answer 1

Answer №1

Modify this section:

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

Update it to the following:

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

Answer 2

Modify this section:

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

Update it to the following:

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

Answer 3

Answer №2

When working with JavaScript, this typically refers to the current target within the current scope. With the function keyword used to declare a function, this points to the object that invoked the function.

If you notice that in your code, the reference of this doesn't point to the Vue instance anymore; instead, it defaults to undefined, likely due to the callback being executed without a specific context for this. One way to resolve this is by storing the reference of this outside 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: To further clarify the concept 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);

Answer 4

When working with JavaScript, this typically refers to the current target within the current scope. With the function keyword used to declare a function, this points to the object that invoked the function.

If you notice that in your code, the reference of this doesn't point to the Vue instance anymore; instead, it defaults to undefined, likely due to the callback being executed without a specific context for this. One way to resolve this is by storing the reference of this outside 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: To further clarify the concept 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 do I keep receiving the error message "Cannot set property of undefined"?

Answer №1

Answer №2

Similar questions

PWA JavaScript struggling with GPS geolocation coordinates

What steps can you take to convert your current menu into a responsive design?

classes_1.Individual is not a callable

The component name 'Hidden' is not valid for use in JSX

Creating a delayed queue using RxJS Observables can provide a powerful and

ElementUI Cascader not rendering properly

Exposing a Hidden Division with a Link via jQuery

stream a song with a font awesome symbol

Is it possible to create an instance of a superclass and automatically instantiate a specific subclass based on the parameters provided?

Tips for optimizing the processing speed of large XML files using jQuery, Javascript, and PHP

Error: Unable to use map function on users .. cannot perform mapping on functions

Link the index value of a v-for loop to the id of a newly created component

The submission of FormData to the PHP server is causing an issue

I keep running into errors whenever I try to run npm install in my React JS project. The only way for me to successfully install dependencies is by using npm install --force. How can I go about resolving these

Problem with IE off-canvas scrolling

Mastering data extraction from JSON using React JS (with Axios)

Implementing custom fonts in Next.js using next-less for self-hosting

Verifying if any of the entries in a specific index contain a null value

Tips for customizing fonts in react-pdf

Checkbox malfunctioning when trying to add values after being checked