Vue. js: невозможно получить данные из облачного хранилища.

Question

Я создал базу данных в облачном хранилище, и имя коллекции - products.

Теперь я хочу получить все ресурсы в моей коллекции. Я уже создал 12 продуктов в своей базе данных. Но в моем vue -devtool я не вижу никакого массива.

Как я могу получить данные из облачного хранилища?

Вот мой 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

Вы можете получить свои продукты из коллекции firestore в mounted вашего vue файла, а затем поместить их sh в свой массив продуктов, используя что-то вроде этого:

<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>