Unable to retrieve lastName and firstName from firestore document in VueJs

user_4659238 0
Viewed 133

enter image description hereI am trying to display last Name and first Name from a document stored upon signup with a field displayName. I thought that having a displayName as a common key would allow me to retrieve last name and first name of the user signing up by making a request to firestore using the displayName property stored in the currentUser object that is returned once I have logged in. However, I cannot access the lastName from the firebase documents and would really appreciate help.

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

There's only a blank array being returned in place of the lastName. I also don't see any requests made by firebase to retrieve the information needed. I get a reference error:error is undefined in my console as well as cannot read property displayName of null despite using a watch to make sure that the user object is uploaded after. Can someone please help with major code changes to help me get through my errors and display the lastname from firebase. Please help! I am new to Vuejs.

enter image description here

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

enter image description here

enter image description here

google-cloud-firestore firebase vue.js javascript
1 Answers

If you want to log all firstName + lastName combinations then try this:

const returnUser = async () => {
  const res = await projectFirestore
    .collection("users")
    .where("displayName", "==", "Abe") // Case sensitive
    .get();

  const lastNameList = res.docs.map(d => `Abe ${d.data().lastName}`)
  console.log(lastNameList)
  docs.value = lastNameList;
}

Try changing the getUser function like this so displayName is always defined.

const getUser = () => {
  // set default value to null
  return user ? { user } : { displayName: "NoUser" } 
}
user_131306970
Related