By Amine Bouhaddi


2019-12-02 22:17:19 8 Comments

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

2 comments

@user1538301 2019-12-02 22:23:45

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

@Showy 2019-12-02 22:24:55

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

Related Questions

Sponsored Content

44 Answered Questions

[SOLVED] How to check empty/undefined/null string in JavaScript?

41 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

38 Answered Questions

[SOLVED] How do you get a timestamp in JavaScript?

43 Answered Questions

[SOLVED] Sort array of objects by string property value

60 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

26 Answered Questions

[SOLVED] How to determine if variable is 'undefined' or 'null'?

21 Answered Questions

[SOLVED] Get the current URL with JavaScript?

  • 2009-06-23 19:26:45
  • dougoftheabaci
  • 2725605 View
  • 2889 Score
  • 21 Answer
  • Tags:   javascript url

6 Answered Questions

[SOLVED] Why does Google prepend while(1); to their JSON responses?

42 Answered Questions

[SOLVED] Detecting an undefined object property

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

Sponsored Content