如何在v-for循环中有效地访问firestore数据
如何在v-for循环中有效地访问firestore数据
提问于 2021-09-30 16:25:11
我们在我们的应用程序中有一个用于用户应用程序工作事件的布局。我们在v-for循环中列出这些应用程序。然而，我们确实需要从我们的users集合中引用一些关于该布局的额外数据。我们可以通过过滤我们的用户集合来实现这一点，但这样做太慢了。
这是可以工作的代码，但速度太慢(有20,000个用户)，导致该站点无法使用。
<span v-for="u in filteredInfo(props.row)">
<span v-if="u && u.skills && u.skills.length > 0" style="display:inline;">
<v-popover>
<i class="fad fa-briefcase"></i>
<template slot="popover">
<span v-for="z in u.skills">{{z.title}} / </span>
</template>
</v-popover>
</span>
</span>
</span>然后：
filteredInfo(user) {
return this.users.filter(member => {
return member.id == user.userId
})
}如果我正确理解了发生了什么，我的v-for循环中的每个应用程序都必须过滤20,000个用户，以找到并加载正确的用户数据……在这种情况下，列出他们的技能。
为了提高这种布局的性能，直接调用用户数据不是更有帮助吗？这是我试图开始工作的代码，但它没有显示v-for循环中的数据。
filteredInfo(user) {
fb.usersCollection.doc(user.userId).get()
.then(doc => {
console.log(doc.data());
return doc.data()
})
}我的第二个方法(上面)会加快页面的速度吗？如果是这样，我需要做些什么才能让它正常工作？
谢谢!
Stack Overflow用户
发布于 2021-10-01 14:49:35
问题出在查询的大小上。
您可以：
- 通过一个参数来划分用户，比如名称的第一个字母。这样，您将拥有20个较小的文档。
- 为每个用户使用一个文档，并使用以下方式进行查询：
或
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69395759
复制相关文章
相似问题
腾讯云开发者
