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