I have implemented a contact form in my Vue.js template that utilizes v-model to display retrieved data within textfields. Within the script section, specifically inside the "created" block, I retrieve a document from Firestore using the provided docid.
After retrieving the document, I perform a check to ensure it is a valid object, and I can successfully output the found object to the console.
The issue arises when attempting to save the object retrieved from Firestore (referred to as the "applicant" object) to the pre-defined applicant object within the data block. While I am able to access and display the value of the doc's first_name property in the console (e.g.,
console.log(doc.data().applicant.first_name)this.applicant.first_name which should update the first name textfield accordingly.
An analysis of the error console indicates that I can output the data, but binding it to applicant.first_name poses a challenge.
https://i.sstatic.net/Nle0r.png
The code snippets are presented below for reference. (I suspect that this issue may be related to the execution of the code within the "created" block before the page is fully rendered.. however, I cannot confirm.)
Your help will be greatly appreciated!
Template
<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
<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())
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 {
console.log("No such document!");
}
})
.catch(function(error) {
console.log("Error getting document:", error);
})
}
}
</script>