Как получить данные после получения firebase firestore в Vue. JS - PullRequest
Новая
       28

Как получить данные после получения firebase firestore в Vue. JS

0 голосов
/ 02 марта 2020

Я хочу показать все данные о заказах, которые я получаю с firebase, на консоль браузера. Пожалуйста, посмотрите на картинку ниже

enter image description here

Это данные, которые получают из firebase после написания некоторых кодов, как показано ниже в cue. js

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

, но не повезло.

Что я могу сделать сейчас, чтобы достичь своей цели?

Спасибо

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Если я правильно понимаю ваш вопрос, вы хотите присвоить массиву ordersData все заказы, полученные из запроса Firestore.

Следующие действия должны помочь: 

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>
0 голосов
/ 02 марта 2020

При работе с 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)
    })
...