firebase - Vue/Nuxt - 使用 v-for 遍历 Firestore 文档集合
问题描述
第一个 Vue/Firebase 项目。将 NuxtJS(带有 Vue v2.x)与 Vuetify 和 Firestore 一起使用。尝试遍历文档集合并使用相关数据呈现 Vuetify Card 组件。目前,我正在从单个文档中获取具有完全相同数据的组件列表。我能够将 Collection 项目记录到控制台,因此我知道数据正确到达。
<template>
<section class="container">
<div>
<ul v-for="article in articles" id="articleCardList" :key="article">
<li>
<v-card dark>
<div class="d-flex flex-no-wrap justify-space-between">
<v-avatar class="ma-3" size="125" tile>
<v-img :key="article.thumbnail" :src="thumbnail"></v-img>
</v-avatar>
<div>
<v-card-title :key="article.title" class="text-h5">{{
title
}}</v-card-title>
<v-card-subtitle :key="article.description">{{
description
}}</v-card-subtitle>
<v-card-actions>
<v-card-text
:key="article.source"
class="ml-2 mt-3"
fab
icon
height="40px"
right
width="40px"
>{{ source }}
</v-card-text>
<v-card-text
:key="article.date"
class="ml-2 mt-3"
fab
icon
height="40px"
right
width="40px"
>{{ date }}
</v-card-text>
</v-card-actions>
</div>
</div>
</v-card>
</li>
</ul>
</template>
<script>
import { fireDb } from '~/plugins/firebase.js'
export default {
data() {
return {
writeSuccessful: false,
readSuccessful: false,
articles: this.articles,
}
},
methods: {
async readFromFirestore() {
fireDb
.collection('autoracing_articles')
.get()
.then((querySnapShot) => {
querySnapShot.forEach((doc) => {
this.articles = [
this.id,
this.title,
this.description,
this.thumbnail,
this.date,
this.link,
this.source,
]
console.log(this.articles)
})
})
},
},
}
</script>
解决方案
它看起来没有articles
正确填充。
要将所有文档收集到一个数组中,请初始化this.articles
为一个空数组,然后用于Array.prototype.push()
附加文档字段的对象:
export default {
data() {
return {
articles: []
}
},
methods: {
async readFromFirestore() {
this.articles = []
fireDb
.collection('autoracing_articles')
.get()
.then((querySnapShot) => {
querySnapShot.forEach((doc) => {
this.articles.push({
id: doc.id,
title: doc.data().title,
description: doc.data().description,
thumbnail: doc.data().thumbnail,
date: doc.data().date,
link: doc.data().link,
source: doc.data().source,
})
})
})
},
}
}
推荐阅读
- raku - 带有内存的标量,或者如何正确地“绑定”
- function - 如何在 R 中绘制具有均匀分布的 3-D 联合密度函数
- android - 如何使用 Intent.ACTION_OPEN_DOCUMENT 过滤 JSON 文件?
- reactjs - 如何将 SVG 源解析为 React 节点?
- javascript - 数组的长度属性在 for 循环中无法正常工作
- google-apps-script - 我无法让 Math.max 函数仅返回有效整数#num
- php - 我的 php 文件中的重定向有问题
- flutter - Flutter:缺少静态目标的未实现处理
- javascript - Vue.js - 导入外部 vue 组件
- html - 页面上 33.3333% 的中心元素