VUE/Nuxt-使用v-for迭代Firestore文档集合 [英] Vue/Nuxt - Iterating Through Firestore Collection of Documents using v-for

问题描述

第一个Vue/Firebase项目。将NuxtJS(带有Vue v2.x)与Vutify和FiRestore配合使用。尝试遍历文档集合并使用相关数据呈现Vutify Card组件。目前，我正在从单个文档中获取具有完全相同数据的组件列表。我能够将收集项目记录到控制台，因此我知道数据正在正确到达。

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

这篇关于VUE/Nuxt-使用v-for迭代Firestore文档集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！