Estoy tratando de devolver la colección de usuarios de Firebase/Firestore, pero el código que tengo no devuelve nada cuando lo verifico en la consola. ¿Me pueden ayudar, soy nuevo en Vue? Estoy tratando de encontrar al usuario que tiene el mismo nombre para mostrar que el que está conectado actualmente, pero estoy atascado.
<template> <p>Process Payroll</p> <h1>{{ user.displayName }} </h1> <h1>{{ docs }} </h1> </template> <script> import getUser from '@/composables/getUser' import { ref } from 'vue' import { projectFirestore } from '../firebase/config' export default { setup(){ const { user } = getUser() const lastName = ref('') const firstName = ref('') const docs = ref('') const returnUser = async () => { const res = await projectFirestore.collection('users').get() if (!error.value) { console.log(res.docs) const doc = res.docs.filter((user1) =>{ if (user1.displayName == user.displayName){ return user.lastName } }) docs.value = doc } } return {user, docs, returnUser } } } </script> <style> </style>En primer lugar , la condición que ha aplicado en la función de filter debe cambiarse para que las variables no se mezclen. Actualmente, estaba comparando el displayName del elemento consigo mismo, lo que siempre será cierto.
En segundo lugar , puede consultar el documento que se requiere de la colección con una consulta simple. Puede encontrar más información aquí .
Además, antes de pasar a la siguiente conclusión, verifique la respuesta que devuelve firestore . El método get() de firestore le devuelve una querySnapshot , por lo que no es necesario llamar a res.docs . Obtendrá sus documentos directamente en res , que será una matriz. Simplemente itere sobre él para obtener un solo documento, cuyas propiedades se pueden acceder fácilmente usando el método .data()
<template> <p>Process Payroll</p> <h1>{{ user.displayName }} </h1> <h1>{{ docs }} </h1> </template> import getUser from "@/composables/getUser"; import { ref } from "vue"; import { projectFirestore } from "../firebase/config"; export default { setup() { const { user } = getUser(); const lastName = ref(""); const firstName = ref(""); const docs = ref([]); const returnUser = async () => { const res = await projectFirestore .collection("users") .where("displayName", "==", user.displayName) .get(); if (!error.value) { // check your response here. console.log(res); const doc = res.filter((userObj) => { if (user.displayName === userObj.data().displayName) { return user.lastName; } }); docs.value = doc; } }; onMounted(returnUser) return { user, docs, returnUser }; }, };