[英]Unable to display data in Vue.js form after pulling from Cloud Firestore
我的Vue.js模板中有一个联系表单,使用文本字段内的v模型显示检索到的数据。 在我的脚本中,在“创建的”块内,我使用传入的docid从Firestore检索了一个文档。
然后,我运行检查以查看是否找到了有效的对象,甚至可以将找到的对象输出到控制台。
问题是我无法将从Firestore找到的对象(在我的情况下为“申请人”对象)保存到我先前在数据块中定义的申请人对象。 例如,我可以找到文档的first_name值并将其输出到控制台(例如console.log(doc.data().applicant.first_name)
),但是我无法将该值保存到绑定到first_name的this.applicant.first_name
文本域。
您可以从错误控制台中看到我能够输出数据,但不能将其绑定到applicant.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>
谢谢@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);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.