[英]Firestore/Flutter: Iterating through the ID of a collection of documents and output them as a list
[英]Vue/Nuxt - Iterating Through Firestore Collection of Documents using v-for
第一个 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()
将 append 和 object 的文档字段:
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,
})
})
})
},
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.