使用 Vuefire 渲染之前在组件中加载 Firestore 数据
P粉790187507
2023-08-29 15:05:47
<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>
</表>
;
</模板>
<脚本设置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.昵称|| player2.firstName + " ” + 玩家2.姓氏 }}
{{player2.playerNumber }}
</td>
</模板>
根据这个文档我们应该使用
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`));有关此主题的更多信息，您可以浏览以下文档