Vue/Nuxt - 使用 v-for 遍历 Firestore 文档集合答案

【问题标题】：Vue/Nuxt - Iterating Through Firestore Collection of Documents using v-forVue/Nuxt - 使用 v-for 遍历 Firestore 文档集合
【发布时间】：2021-08-15 01:56:39
【问题描述】：

第一个 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>

【问题讨论】：

标签： firebase vue.js google-cloud-firestore nuxt.js

【解决方案1】：

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,
            })
          })
        })
    },
  }
}

【讨论】：