Блог

Первый проект Vue/Firebase. Использование NuxtJS (с Vue v2.x) с Vuetify и Firestore. Попытка перебора набора документов и визуализации компонентов карты Vuetify с соответствующими данными. В настоящее время я получаю список компонентов с точно такими же данными из одного документа. Я могу регистрировать элементы коллекции в консоли, поэтому я знаю, что данные поступают правильно.

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