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

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

Configuring universal sass variables within a vue application

Choosing the subsequent element that comes before

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

Secure Flask API used for serving JSON files to a basic HTML, JavaScript, and CSS web application

I'm not entirely sure why I keep getting the error message stating "Cannot read property 'innerHTML' of null"

Simultaneous Loading: Marvelous Vue Preloader Spinner and Content Display (Vuejs)

Maximizing Content Width in FullCalendar v5 to Ensure Screen Compatibility

Struggling to transmit data to material dialog in Angular2+

Enhance the efficiency of DataTable by optimizing cell class modifications

Sending dynamic data from PHP to jQuery flot pie chart

Exploring AngularJS: The Innovative Navigation Bar

How can you use jQuery to select and manipulate a wildcard href ID?

Utilizing Radio buttons for validation in react-hook-form

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

How can you convert Promise.all to a single Promise?

Issue in VueJs where mutations do not properly save new objects to the state

Struggling to get my Vue.js unit test to pass with test-utils

Using Jquery to toggle the visibility of a DIV element and adding a blinking effect when it becomes visible