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

【问题标题】：Unable to display data in Vue.js form after pulling from Cloud Firestore从 Cloud Firestore 拉取数据后无法以 Vue.js 形式显示数据
【发布时间】：2019-05-10 08:47:28
【问题描述】：

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

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

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

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

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

非常感谢任何人的帮助！

模板

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

【问题讨论】：

我在这里可能完全错了，但是then(...) 中的函数不是在不同的范围内吗？尝试在创建的开头缓存您的对象this（例如：this _this = this）并将this(...)中的this替换为_this。
哇。谢谢@PolygonParrot - 就是这样。我在创建的函数的开头添加了一个简单的“let _this = this”，并将后期的值更改为_this.applicant.first_name = doc ...，并且它起作用了。不敢相信我被“这个”错误击中了。

标签： javascript vue.js google-cloud-firestore

【解决方案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);
        })

【讨论】：