使用 Vuefire 渲染之前在组件中加载 Firestore 数据

Question

<p>我正在尝试用姓名和个人资料图片填充人员表。该名称源自 Firestore 数据库，图片使用该名称在 Firebase 存储桶中查找相关图片。</p> <p>我已经观看了几个小时的视频，并且已经浏览了近一百篇文章，因此我的示例代码包含了每个代码的片段，因为我一直在尝试每种组合并得到混合但不成功的结果。</p> <p>在返回最少错误的当前状态下，我能够成功地使用名称填充表，但是在同一组件中，它无法提取个人资料图片。用于个人资料图片的值已更新，但它从占位符值更新为<code>未定义</code>。</p> <p><strong>GamePlanner.vue</strong></p> <pre class="brush:vue;toolbar:false;"><template> <div> <Field /> <Bench /> <!-- <Suspense> <template #default> --> <PlanSummary /> <!-- </template> <template #fallback> <div class="loading">Loading...</div> </template> </Suspense> --> </div> </模板> </前> <p><strong>PlanSummary.vue</strong></p>

<模板>
    <div class="summaryContainer">
        <div class="inningTableContainer">
            <table class="inningTable">
                <正文>
                    <!--<悬念> -->
                        
                            <PlayerRow v-for="players.value" 中的玩家:key="玩家.id" :player="(玩家作为玩家)" >>
                        

                        
                    
                </tbody>
            </表>