使用 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">
        

            <table class="inningTable">
                <正文>
                    <!--<懸念> -->
                        
                            <PlayerRow v-for=“players.value 中的玩家” :key="player.id"; :player="(玩家當玩家)" >>
                        

                        
                    <!--</懸念> -->
                </tbody>
            </表>
        

    

Answer 1

根據這個文檔我們應該使用useCollection 包含 collection 作為參數，如下所示：

const todos = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`))

我發現您正在以正確的方式使用它，但您可以將其直接分配給 players 變量，而不是分配給 ref 。當您嘗試使用此反應式物件作為 ref 物件的值時，這是不支援的。

您可以透過更改此行來解決您的問題：

const players = ref(); 
players.value = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));

致：

const players = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));

有關此主題的更多信息，您可以瀏覽以下文檔

#