Question

我在Cloud Firestore上创建了数据库，集合名称为product。

现在，我想检索集合中的所有资源。我已经在数据库中创建了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>

Vue.js：无法从Cloud Firestore检索数据

1 个答案: