时间戳

首页 > 解决方案 > 使用 Vue js 进行 Firebase 查询

firebase - 使用 Vue js 进行 Firebase 查询

问题描述

我是 Vue JS 和 Firebase 的新手。我的目标是获取所有具有相同类别的“事件”。我的意思是，让我有两个 eventos，一个 eventos 类别“SMIX”，另一个有“DAM”。现在我想让 eventos 有“SMIX”类别

我的数据结构在这里： 在此处输入图像描述

 created() {
            var datos = []

            firebase.database().ref('usuarios').on("value", data => {

                data.forEach(function(user){
                    user.child("eventos").orderByChild("categoria").equalTo("SMIX")
                        .forEach(function(evento){
                        datos.push(evento.val())
                    });
                });

                this.eventos = datos;
            });
        }[My data Structure][1]

标签： firebasevue.jsfirebase-realtime-database

解决方案

您的代码中有几个错误和要点需要注意：

首先，如果您收到错误user.child(...).orderByChild is not a function ，那是因为 with data.forEach(function(user) {...}), useris a DataSnapshot（请参阅forEach()文档），并且通过调用此child()方法，DataSnapshot您会得到另一个DataSnapshot... 没有orderByChild()方法。

该orderByChild()方法是 a 的方法Reference，所以你需要做

user.child(...).ref.orderByChild()

使用的ref属性DataSnapshot

其次，你不能做

user.ref.child("eventos").orderByChild("categoria").equalTo("SMIX")
                        .forEach()

因为您需要使用once()oron()方法来获取由 a 表示的数据库位置的数据Reference。

第三，由于您要在一个循环中执行多个查询，因此您需要使用once()方法而不是on()方法。该on()方法设置了一个监听器，持续“监听特定位置的数据变化”。

最后，请注意您需要使用Promise.all()来管理对数据库的并行异步查询。

因此，注意到上述所有要点后，以下代码将起到作用（放入created()）：

        var datos = []

        firebase.database().ref('usuarios').once('value')
        .then(dataSnapshot => {
            var promises = [];
            dataSnapshot.forEach(user => {    
                promises.push(user.ref.child("eventos").orderByChild("categoria").equalTo("SMIX").once('value'));
            });
            return Promise.all(promises);
        })
        .then(results => {
            //console.log(results);
            results.forEach(dataSnapshot => {
                dataSnapshot.forEach(evento => {
                    datos.push(evento.val());
                });     
            });
            this.eventos = datos;
        });

推荐阅读