I'm trying to assign response.data.Response.displayName from my GET request to my playerName property, however, I am getting an error "Uncaught (in promise) TypeError: Cannot set property 'playerName' of undefined at eval". I am successfully console logging response.data.Reponse.displayName so there is a displayName in it.

Why am I getting this error?

export default {
  data: function() {
    return {
      playerName: ''
    }
  },
  methods: {

  },
  mounted() {
    axios.get('/User/GetBungieNetUserById/19964531/')
      .then(function(response) {
          this.playerName = response.data.Response.displayName
        console.log(response.data.Response.displayName)
      });
  }
}

I'm trying to assign response.data.Response.displayName from my GET request to my playerName property, however, I am getting an error "Uncaught (in promise) TypeError: Cannot set property 'playerName' of undefined at eval". I am successfully console logging response.data.Reponse.displayName so there is a displayName in it.

Why am I getting this error?

export default {
  data: function() {
    return {
      playerName: ''
    }
  },
  methods: {

  },
  mounted() {
    axios.get('/User/GetBungieNetUserById/19964531/')
      .then(function(response) {
          this.playerName = response.data.Response.displayName
        console.log(response.data.Response.displayName)
      });
  }
}

• javascript
• vue.js
• vuejs2
• axios

Share Improve this question Follow edited Jul 5, 2021 at 22:45 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jan 4, 2019 at 15:48 OnyxOnyx 5,7821010 gold badges5252 silver badges119119 bronze badges 5

• 1 use (response) => { this.playerName = ...}. With the function keyword you lose the original this context – Poul Kruijt Commented Jan 4, 2019 at 15:49
• use arrow function instead: response=>{ this.playerName = /*..rest of code */} – kockburn Commented Jan 4, 2019 at 15:49
• Hmmm, so it's mandatory to use arrow function in this case? – Onyx Commented Jan 4, 2019 at 15:52
• you could do let that=this before axios call, and inside the callback use that instead of this – Boussadjra Brahim Commented Jan 4, 2019 at 15:53
• @Bobimaru no you could do function(response){/* code */}.bind(this) – kockburn Commented Jan 4, 2019 at 15:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Other ments and answers are correct - using an arrow/lambda function instead of just function will work. But there's a nuance as to why.

Javascript's concept of this is well defined but not always what you'd expect from other languages. this can change within one scope block when you're executing from sub-functions of things like callbacks. In your case, the function in the then no longer understands this as the same as if you were running the same code directly inside mounted().

You can bind functions, however, to (among other purposes) have a specific this attached that can't be changed. Arrow functions do this implicitly, and bind this to what this is in the context the arrow function is created. Therefore, this code:

axios.get('/User/GetBungieNetUserById/19964531/')
  .then((response) => {
      this.playerName = response.data.Response.displayName
    console.log(response.data.Response.displayName)
  });

understands this properly. It is (roughly!) equivalent to the following:

axios.get('/User/GetBungieNetUserById/19964531/')
  .then((function(response) {
      this.playerName = response.data.Response.displayName
    console.log(response.data.Response.displayName)
  }).bind(this));

Use lambda function ( Arrow function ) to reach the code

export default {
  data: function() {
    return {
      playerName: ''
    }
  },
  methods: {

  },
  mounted() {
    axios.get('/User/GetBungieNetUserById/19964531/')
      .then((response) => {
          self.playerName = response.data.Response.displayName
        console.log(response.data.Response.displayName)
      });
  }
}