.orderByChild() 不适用于 Firebase (vue.js)答案

【问题标题】：.orderByChild() is not working on Firebase (vue.js).orderByChild() 不适用于 Firebase (vue.js)
【发布时间】：2019-04-13 06:23:58
【问题描述】：

我正在尝试使用 .orderByChild 对数据进行排序，但数据是按节点名称过滤的。

我在 Firebase 上添加了这个：

   "concerts": {
  ".indexOn": "expires"
}

这是我的 index.js 文件中的代码：

loadConcerts ({commit}) {
  commit('setLoading', true)
  firebase.database().ref("concerts").orderByChild("expires").startAt(Date.now()/1e3).limitToFirst(7).once("value")
    .then((data) => {
      const concerts = []
      const obj = data.val()
      for (let key in obj) {
        concerts.push({
          expires: obj[key].expires,
          ...
        })
      }
      commit('setLoadedConcerts', concerts)
      commit('setLoading', false)
    })

我也添加了这个：

getters: {
loadedConcerts (state) {
  return state.loadedConcerts.sort((concertA, concertB) => {
    return concertA.expires > concertB.expires
  })
},
loadedConcert (state) {
  return (concertId) => {
    return state.loadedConcerts.find((concert) => {
      return concert.id === concertId
    }) 
   }

也许有人有线索？谢谢

【问题讨论】：

你能分享你的数据库结构和数据样本吗？
这里是数据库结构：firebasestorage.googleapis.com/v0/b/koplesh-1a17e.appspot.com/o/…谢谢你的帮助 Renaud
@RenaudTarnec 有什么想法吗？如果您需要更多东西，请告诉我:)
如果您尝试使用简单的 JavaScript 页面进行查询会发生什么？制作一个类似于此答案stackoverflow.com/questions/52468815/… 中的简单 HTML 页面，并像您所做的那样查询您的数据库firebase.database().ref("concerts").orderByChild("expires").startAt(Date.now()/1e3).limitToFirst(7).once("value") .then((data) => {console.log(data.size)}); HTML 页面可以存储在您的 PC 上本地，您可以在浏览器中打开文件。
嗨，如上所述，您有时间独立于 Vue.js 代码测试您的查询吗？

标签： firebase vue.js firebase-realtime-database vuex vuetify.js

【解决方案1】：

为了以正确的顺序（按expires）列出值，您应该使用forEach() 方法而不是直接使用data.val()。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
  </head>

  <body>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: '......',
        authDomain: '......',
        databaseURL: '......',
        projectId: '......',
        storageBucket: '......'
      };
      firebase.initializeApp(config);
      firebase
        .database()
        .ref('past')
        .orderByChild('expires')
        .startAt(Date.now() / 1e3)
        .limitToFirst(7)
        .once('value')
        .then(data => {
          const concerts = []
          data.forEach(element => {
            console.log(element.val());
            concerts.push({ id: element.key, expires: element.val().expires});
          });
        });
    </script>
  </body>
</html>

PS：如果你想用相反的顺序订购，只需将-1*expires的值存储在另一个字段中

【讨论】：

它适用于基本的js文件！！！知道如何在我的 vue 文件上实现它吗？我怎么能比雷诺的谈话更感谢你呢？你太棒了！非常感谢您的宝贵时间
这样它会多次打印我的数据哈哈.then(data => { const Concerts = [] const obj = data.val() data.forEach(element => { for (let key在 obj) { Concerts.push({ id: key, expires: obj[key].expires .... }) } })
嗨@PhilJones。不要使用obj[key]，只需使用element 对象填充concerts 数组。我已经更新了答案。