Tenemos un diseño dentro de nuestra aplicación para que las aplicaciones de los usuarios trabajen en eventos. Enumeramos esas aplicaciones en un bucle v-for. Sin embargo, realmente necesitamos hacer referencia a algunos datos adicionales sobre ese diseño de nuestra colección de usuarios. Podemos lograr esto filtrando a través de nuestra colección de usuarios, pero es demasiado lento.

Este es el código que funciona, pero es tan lento (con 20 000 usuarios) que el sitio no se puede usar.

 <span v-for="u in filteredInfo(props.row)"> <span v-if="u && u.skills && u.skills.length > 0" style="display:inline;"> <v-popover> <i class="fad fa-briefcase"></i> <template slot="popover"> <span v-for="z in u.skills">{{z.title}} / </span> </template> </v-popover> </span> </span> </span>

Después:

 filteredInfo(user) { return this.users.filter(member => { return member.id == user.userId }) }

Si entiendo lo que está sucediendo correctamente, cada aplicación en mi ciclo v-for tiene que filtrar a través de 20 000 usuarios para encontrar y cargar los datos de usuario correctos... en este caso, enumerar sus habilidades.

Para acelerar el rendimiento de este diseño, ¿no sería más útil llamar directamente a los datos del usuario? Aquí está el código que estoy tratando de hacer funcionar, pero no muestra los datos en el bucle v-for.

 filteredInfo(user) { fb.usersCollection.doc(user.userId).get() .then(doc => { console.log(doc.data()); return doc.data() }) }

¿Mi segundo método (arriba) aceleraría la página? Si es así, ¿qué debo hacer para que funcione?

¡Gracias!