https://i.sstatic.net/IdZGi.pngWhen trying to retrieve the last name and first name from a document stored upon signup with a field displayName, I encountered an issue. Despite having a common key as displayName, which should allow me to fetch this information by making a request to firestore using the currentUser object returned after logging in, I am unable to access the lastName from the Firebase documents. I would appreciate any assistance in resolving this matter.
<template>
<p>Process Payroll</p>
<h1>{{ user.displayName }} </h1>
<h1>{{ docs }} </h1>
</template>
<script>
import getUser from '@/composables/getUser'
import { ref, onMounted, watch } from 'vue'
import { projectFirestore, projectAuth } from '@/firebase/config'
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const { user } = getUser();
watch(()=> user, () => returnUser())
const lastName = ref("");
const firstName = ref("");
const docs = ref([]);
const returnUser = async () => {
const res = await projectFirestore
.collection("users")
.where("displayName", "==", "Abe")
.get();
if (!error.value) {
// check your response here.
console.log(res);
const doc = res.filter((userObj) => {
if ("Abe" === userObj.data().displayName) {
return userObj.data().lastName;
}
});
docs.value = doc;
}
};
onMounted(returnUser)
return { user, docs, returnUser};
},
}
</script>
The issue is that only a blank array is being returned instead of the lastName value. Also, there don't seem to be any requests made by Firebase to retrieve the necessary information. In my console, I'm getting a reference error stating "error is undefined" along with "cannot read property displayName of null," despite ensuring through a watch that the user object is loaded. Any guidance on significant code changes to help resolve these errors and display the lastName from Firebase would be greatly appreciated. Please assist as I am new to Vuejs.
https://i.sstatic.net/YjbIP.png
import { ref } from 'vue'
import { projectAuth } from '../firebase/config'
// refs
const user = ref(projectAuth.currentUser)
// auth changes
projectAuth.onAuthStateChanged(_user => {
console.log('User state change. Current user is:', _user)
user.value = _user
});
const getUser = () => {
return { user }
}
export default getUser