Vue.js：无法从云存储中检索数据

Question

我在cloud firestore上创建了数据库，集合名称是products。

现在我想检索我收藏中的所有资源。 我已经在我的数据库中创建了 12 个产品。 但是在我的 vue-devtool 中，我看不到任何数组。

如何从 Cloud Firestore 中检索数据？

这是我的 vue.js 代码。

<template>
          <h3 class="d-inline-block">Products list</h3>
          <div class="product-test">
            <div class="form-group">
              <input type="text" placeholder="Product name" v-model="product.name" class="form-control">
            </div>

            <div class="form-group">
              <input type="text" placeholder="Price" v-model="product.price" class="form-control">
            </div>

            <div class="form-group">
              <button @click="saveData" class="btn btn-primary">Save data</button>
            </div>
            <hr>
            <h3>Product List</h3>
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Price</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="product in products" :key="product">
                  <td>{{ product.name }}</td>
                  <td>{{ product.price }}</td>
                </tr>

              </tbody>
            </table>
          </div>
      </div>
  </div>
</template>

<script>

import { fb, db } from '../firebase'

export default {
  name: 'Products',
  props: {
    msg: String
  },
  data() {
    return {
      products: [],
      product: {//object
        name: null,
        price: null
      }
    }
  },
  methods: {
    saveData() {

      // Add a new data in my table(It's done.).

      db.collection("products").add(this.product)

      .then((docRef) =>  {
          console.log("Document written with ID: ", docRef.id);
          this.product.name = "",
          this.product.price = ""
      })
      .catch(function(error) {
          console.error("Error adding document: ", error);
      });
    },

    //retrieve all the data from the database.

    created() {
         db.collection('products').get().then((querySnapshot) => {

          querySnapshot.forEach((doc) => {

              this.products.push(doc.data());
          });
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

Answer 1

您可以从 vue 文件的 mounted 中的 firestore 集合中检索您的产品，然后使用以下方式将它们推送到您的产品数组中：

<script>
import { db } from '../firebase';

export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    db.collection('products').get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        this.products.push(doc.data());
      });
    });
  },
}
</script>