在 Vue.JS 中获取 firebase firestore 后如何生成数据

Question

我想显示从 firebase 到浏览器控制台的所有订单数据。 请看下面的图片

这是在cue.js中编写如下代码后从firebase获取的数据

orders(){
    const db = firebase.firestore();
    const dbOrderRef = db.collection('order');
    dbOrderRef.get()
        .then(res => {
            res.forEach(doc => {
                console.log(doc.data())
            })
        })
        .catch(err => {
            console.log('error', err)
        })
}

我试图在下面喜欢这个

数据中的实例变量

ordersData = []

然后在方法中

this.ordersData = doc.data()

但没有运气。

我现在可以做什么来实现我的目标？

谢谢

Answer 1

如果我正确理解您的问题，您希望将从 Firestore 查询收到的所有订单分配给ordersData数组。

以下应该可以解决问题：

const db = firebase.firestore();
const dbOrderRef = db.collection('order');

let orderArray = [];
dbOrderRef.get()
    .then(res => {
        res.forEach(doc => {
            let orderObj = doc.data();
            orderObj.id = doc.id;
            orderArray.push(orderObj);
        });
        this.ordersData = orderArray;
    })
    .catch(err => {
        console.log('error', err)
    })

---

然后您可以在模板中显示ordersData数组，如下所示，例如：

            <div v-if="ordersData.length">
                <div v-for="order in ordersData">
                    <h5>{{ order.name }}</h5>
                    <p>Price: {{ order.price }}</p>
                    <p>
                     <a @click="openOrderDetail(order.id)">Open order</a>  
                     // Here we show how we can call an openOrderDetail() method passing the Firestore document id of the order.
                     // This would allow, for example to route to a page where you use the order id to query for the order document.
                    </p>
                </div>
            </div>

Answer 2

在使用then ，在 then 块中使用的这个关键字指的是块本身而不是 Vue 对象。 下面的解决方案应该作为 orders 函数工作，我们将 Vue 引用保存在另一个变量中，并使用该变量访问 ordersData。

let _this = this
const db = firebase.firestore();
const dbOrderRef = db.collection('order');
dbOrderRef.get()
    .then(res => {
        res.forEach(doc => {
            _this.ordersData = doc.data();
            console.log(_this.ordersData)
        })
    })
    .catch(err => {
        console.log('error', err)
    })