Блог

Я пытаюсь отобразить фамилию и имя из документа, сохраненного при регистрации, с помощью поля DisplayName. Я думал, что наличие DisplayName в качестве общего ключа позволит мне получить фамилию и имя пользователя, зарегистрировавшегося, отправив запрос в firestore, используя свойство DisplayName, хранящееся в объекте CurrentUser, которое возвращается после того, как я вошел в систему. Однако я не могу получить доступ к фамилии из документов firebase и был бы очень признателен за помощь.

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

Вместо фамилии возвращается только пустой массив. Я также не вижу никаких запросов от firebase для получения необходимой информации. Я получаю ссылку на ошибку:ошибка не определена в моей консоли, а также не может прочитать свойство DisplayName значения null, несмотря на использование часов, чтобы убедиться, что объект пользователя загружен позже. Может кто-нибудь, пожалуйста, помочь с основными изменениями кода, чтобы помочь мне справиться с моими ошибками и отобразить фамилию из firebase. Пожалуйста, помогите! Я новичок в Vuejs.

 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
 

Если вы хотите зарегистрировать все комбинации «Имя фамилия», попробуйте сделать это:

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

Попробуйте изменить функцию getUser таким образом, чтобы имя дисплея всегда было определено.

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