0
208
Vistasno se puede representar el elemento en la pantalla por v-for
Obtuve datos de una base de datos, los almacené en una matriz, pero no pude procesarlos con V-For, ni recibí ningún error o advertencia. Tengo los siguientes datos en mi base de datos:
y aquí está mi código:
<template> <div v-for="item in userList" :key="item.uid"> <p>{{item.fullName}}</p> </div> </template> <script> import { db } from "src/boot/firebase"; import { collection, query, where, getDocs } from "firebase/firestore"; export default { setup() { return { userList: [] }; }, async created() { const q = query( collection(db, "userProfile"), where("verified", "==", true) ); const querySnapshot = await getDocs(q); let arr = []; querySnapshot.forEach(doc => { // doc.data() is never undefined for query doc snapshots let docData = doc.data(); this.userList.unshift(docData); }); console.log(this.userList) } }; </script>3 Respuestas
Responde la pregunta0
Oh, creo que su problema es que no hizo que la lista de usuarios sea reactiva ( Vue Docs ). Prueba esto:
setup() { return { userList: ref([]) }; },y asegúrese de importar ref:
import { ref } from 'vue'; Cuando usa referencias, maneja el valor que contienen, en lugar de la referencia directamente, por lo que en cualquier lugar que esté usando this.userList , ahora debe usar this.userList.value (excepto en la plantilla: las plantillas saben cómo tratar con referencias) .
0
Si está utilizando la API de composición, coloque todo en la función de configuración, no hay unenlace creado aquí, por lo que puede hacer la función:
setup() { const userList = ref([]); const created = async () => { const q = query( collection(db, "userProfile"), where("verified", "==", true) ); const querySnapshot = await getDocs(q); let arr = []; querySnapshot.forEach(doc => { let docData = doc.data(); userList.value.unshift(docData); }); }; created(); return { userList }; },0
Creo que su problema podría ser que las plantillas necesitan un solo nodo raíz, y su v-for hace que haya múltiples raíces en la plantilla. Intente envolverlo en un <div> .