Estoy atascado desde hace un par de días y traté de resolver mi problema sin ningún resultado.

Estoy creando una aplicación Vue 3 y almaceno datos en una base de datos de Firestore. En una página de resultados, quiero mostrar los datos de la base de datos.

 getDBdata() { const cuser = this.user.email; console.log("cuser:", cuser) const q = query(collection(db, "testergebnisse"), where("email", "==", cuser)); const unsubscribe = onSnapshot(q, (querySnapshot) => { const mitarbeiter = []; querySnapshot.forEach((doc) => { this.mitarbeiter.push({ ...doc.data(), id: doc.id, testdate: moment(doc.data().testdatum.seconds).format("DD/MM/YYYY"), }) mitarbeiter.push(doc.data().testdatum); }); console.log("Current records: ", mitarbeiter); }); }

En la sección Plantilla, quiero representar los datos:

 <q-card v-for="use in mitarbeiter" :key="use.d" flat bordered class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"> <q-card-section> <div class="row items-center no-wrap"> <div class="col"> <div class="text-h6">Testergebnis Covid 19 Test</div> <div class="text-subtitle2">Testdatum: {{ use.testdate }}</div> <div class="text-subtitle2">Ergebnis: {{ use.testergebnis }}</div> <div class="text-subtitle2">Test Hersteller: {{ use.testhersteller }}</div> <div class="text-subtitle2">Test ID: {{ use.id }}</div> </div> </div> <span></span> </q-card-section> </q-card>

Cuando hago clic en el botón, disparo la función getDBdata() y puedo ver en la consola que en realidad obtiene los datos de la base de datos. Pero los datos no se representan en el DOM.

Cuando cambio la :tecla en el código, la página se vuelve a cargar y también muestra los datos. También intenté activar la función en created () sin éxito.

No tengo idea de qué más puedo hacer. Cualquier ayuda muy apreciada.

Gracias y saludos Marc