Невозможно отобразить данные в форме Vue.js после извлечения из Cloud Firestore

Question

У меня есть форма контакта в моем шаблоне Vue.js, использующая v-модель внутри моих текстовых полей для отображения полученных данных.В моем скрипте внутри «созданного» блока я получаю документ из Firestore, используя переданный в docid.

Затем я запускаю проверку, чтобы увидеть, найден ли допустимый объект, и я даже могу вывести найденный объект на консоль.

Проблема в том, что я не могу сохранить объект, найденный в Firestore (в моем случае это объект-заявитель), в объект-заявитель, который я ранее определил в блоке данных.Например, я могу найти и вывести значение first_name документа на консоль (например, console.log(doc.data().applicant.first_name)), но не могу сохранить значение в this.applicant.first_name, привязанном к текстовому полю first_name.

Вы можете видеть изконсоль ошибок, что я могу вывести данные, но не могу связать их с заявителем.first_name.

Код ниже.( Мне интересно, имеет ли это какое-либо отношение к тому факту, что код запускается в блоке "create" до отображения страницы ... Я не знаю. )

Заранее большое спасибо за помощь!

Шаблон

<template>
  <v-container
    fluid>
    <v-text-field v-model="applicant.first_name" label="First Name"/>
    <v-text-field v-model="applicant.middle_name" label="Middle Name"/>
    <v-text-field v-model="applicant.last_name" label="Last Name"/>
    <v-text-field v-model="applicant.email" label="Email"/>
  </v-container>
</template>

Скрипт

<script>
  import db from '@/components/firebase/firebaseInit.js'

  export default {
    data() {
      return {
        applicant: {
          first_name: '',
          middle_name: '',
          last_name: '',
          email: ''
        },
      }
    created: function () {
      db.collection("applicants").doc(this.$route.params.id)
        .get()
        .then( function(doc) {
          console.log('Inside First call');

          if (doc.exists) {
            console.log("Document data:", doc.data())
            // console.log(doc.data().first_name)

            this.applicant.first_name = doc.data().first_name
            this.applicant.middle_name = doc.data().middle_name
            this.applicant.last_name = doc.data().last_name
            this.applicant.email = doc.data().email
          } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
          }
        })
        .catch(function(error) {
         console.log("Error getting document:", error);
        })

    }

  }
</script>

Answer 1

Спасибо, @PolygonParrot за ответ.Добавлены значения let _this = this и последующие значения _this.applicant... ниже.

created: function () {
      let _this = this
      db.collection("applicants").doc(this.$route.params.id)
        .get()
        .then( function(doc) {
          console.log('Inside First call');

          if (doc.exists) {
            console.log("Document data:", doc.data())
            // console.log(doc.data().first_name)

            _this.applicant.first_name = doc.data().first_name
            _this.applicant.middle_name = doc.data().middle_name
            _this.applicant.last_name = doc.data().last_name
            _this.applicant.email = doc.data().email
          } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
          }
        })
        .catch(function(error) {
         console.log("Error getting document:", error);
        })