使用 Vuefire 渲染之前在元件中載入 Firestore 數據
<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>
</範本>
