Uncaught (в обещании) TypeError: Невозможно установить свойство 'playerName' из неопределенного при eval

Question

Я пытаюсь присвоить response.data.Response.displayName из моего запроса GET свойству playerName, однако я получаю ошибку "Uncaught (in promise) TypeError: Cannot set property 'playerName' of undefined at eval". Я успешно веду журнал консоли response.data.Reponse.displayName, поэтому в нем есть displayName. Буду признателен за любую информацию о том, почему я получаю эту ошибку.

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

Answer 1

Другие комментарии и ответы верны - будет работать стрелка / лямбда-функция вместо function. Но есть нюанс, почему.

Концепция Javascript this четко определена, но не всегда то, что вы ожидаете от других языков. this может измениться в одном блоке области видимости, когда вы выполняете подфункции таких вещей, как обратные вызовы. В вашем случае функция в then больше не воспринимает this так же, как если бы вы выполняли тот же код непосредственно внутри mounted().

Вы можете привязать функции, однако, к (среди прочих целей) прикрепленным конкретным this, которые нельзя изменить. Функции стрелок делают это неявно и связывают this с тем, что this находится в контексте, где создается функция стрелок. Поэтому этот код:

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

правильно понимает this. Это ( примерно! ) эквивалентно следующему:

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

Answer 2

Используйте лямбда-функцию (функцию стрелки), чтобы получить код

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