代码之家 › 专栏 › 技术社区 › akaHeimdall

从Cloud FireStore中提取后无法在Vue.js窗体中显示数据

google-cloud-firestore vue.js javascript

akaHeimdall · 技术社区 · 7 年前

我的vue.js模板中有一个联系人表单,使用文本字段中的v模型来显示检索到的数据。在我的脚本中,在“已创建”块的内部,我使用传入的docid从FireStore检索文档。

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

问题是,我无法将从FireStore(在我的例子中是“申请人”对象)找到的对象保存到我以前在数据块中定义的申请人对象。例如,我可以找到文档的第一个名称值并将其输出到控制台(例如, console.log(doc.data().applicant.first_name) )但我无法将值保存到 this.applicant.first_name 绑定到第一个“名称”文本字段。

从错误控制台可以看到,我可以输出数据,但不能将其绑定到application.first\u名称。

代码如下。( 我想知道这是否与代码在呈现页面之前在“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>

1 回复 | 直到 7 年前

akaHeimdall 7 年前

多谢,@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);
        })