使用 Vuefire 渲染之前在元件中載入 Firestore 數據
P粉790187507
P粉790187507 2023-08-29 15:05:47
0
1
637
<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> </表>
; </範本> <腳本設定lang=“ts”> 從“vue”導入{計算,onErrorCaptured,ref}; 從“vuefire”導入{useFirestore,useCollection}; 從“firebase/firestore”導入{集合}; 從“@/definitions/GamePlanner”導入{ Player, Inning }; 從“./PlayerRow.vue”匯入 PlayerRow; const db = useFirestore(); const gamePlanID = "O278vlB9Xx39vkZvIsdP"; // const 玩家 = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`)); // const 玩家 = ref(useCollection(collection(db, `/gameplans/${gamePlanID}/participants`))); // 調度程序刷新執行期間未處理的錯誤 // 未擷取(在承諾中) DOMException: 無法在「Node」上執行「insertBefore」:要在其之前插入新節點的節點不是該節點的子節點。 const 玩家 = ref(); Players.value = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`)); // 看似無限循環,“當沒有要關聯的活動元件實例時呼叫 onServerPrefetch。” // 渲染 5 (??) 個未定義的玩家 // 顯示一個錯誤:未捕獲(承諾中) TypeError:無法讀取未定義的屬性(讀取「子字串」) // const 玩家 = 計算(() => useCollection(collection(db, `/gameplans/${gamePlanID}/participants`))); // onErrorCaptured((錯誤, vm, 訊息) => { // console.log("載入摘要元件時發生錯誤:", error, "vm: ", vm, "info: ", info); // 拋出錯誤; // }); </腳本> </前> <p><strong>PlayerRow.vue</strong></p>
<模板>
    
        <td>
            >
            {{player2.暱稱||玩家2.firstName” 」玩家2.姓氏 }}
            {{player2.playerNumber }}
        </td>
    
</範本>


            
P粉790187507
P粉790187507

全部回覆(1)
P粉432906880

根據這個文檔我們應該使用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`));

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

#
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板