从Cloud Firestore提取后无法以Vue.js形式显示数据

Question

我在Vue.js模板中有一个联系表单，使用文本字段内部的v-model显示检索到的数据。在我的脚本中，在“创建的”块内，我使用传入的docid从Firestore检索了一个文档。

然后我进行检查以查看是否找到了有效的对象，甚至可以将找到的对象输出到控制台。

问题是我无法将从Firestore找到的对象（在我的情况下为“申请人”对象）保存到我先前在数据块中定义的申请人对象。例如，我可以找到文档的first_name值并将其输出到控制台（例如console.log(doc.data().applicant.first_name)），但是我无法将该值保存到绑定到first_name文本字段的this.applicant.first_name上。

您可以从错误控制台中看到我可以输出数据，但不能将其绑定到申请人。first_name。

代码在下面。 （我想知道这是否与代码在呈现页面之前在“创建的”块中运行代码这一事实有关。我不知道。）

在此先感谢任何人的帮助！

模板

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