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

我尝试在下面点赞

data中的实例变量

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>