[Vuejs]-Vue3: How to wait for full array before rendering component?

by

0👍

How about setting a temporary variable (teamMembers) and push each item to that variable instead. Then set it to state afterwards, when all items has been pushed.

const qTeammembers = query(collection(db, "users"), where("teamid", "==", store.state.userData.teamid));
unsubToTeamMembers = onSnapshot(qTeammembers, (teammembersSnap) => {
    store.state.teammembers = []
    const teamMembers = []
    teammembersSnap.docs.forEach((doc9) => {
        let teammember = doc9.data()
        teammember.docid = doc9.id

        // Create an array of team members
        teamMembers.push(teammember)
    })
    store.state.teammembers = teamMembers
})

0👍

I’m not sure, are you using Vue 3 but according to your comment about <suspense> here is an example how you can use asynchronous observer onSnapshot() in a Promise.

dishList.vue

<template>
    <ul v-if="data.length">
        <li v-for="item in data" :key="item">{{ item }}</li>
    </ul>
</template>

<script setup lang="ts">
import { onSnapshot, collection, getFirestore } from '@firebase/firestore'
const data = ref([])

await new Promise(resolve => {
    return onSnapshot(collection(getFirestore(), 'dishes'), snap => {
        if (!snap.empty) {
            snap.forEach(docSnap => {
                data.value.push(docSnap.data())
            })
            setTimeout(() => resolve('done'), 500)
        }
    })
})
</script>

app.vue

<template>
   <Suspense>
      <dishList></dishList>
      <template #fallback>Loding Data...</template>
   </Suspense>
</template>

If you want more accurate answer to your question you need to provide more code whole components not just little snippet of them.

Leave a comment