Question

我目前正在使用VueJS，Firebase和VueFire创建项目。我遇到的问题是订购最新到最旧的帖子列表。

我尝试使用Firebase的内置查询，例如list.orderByChild('date')，但没有运气。

我知道我需要使用Array.sort((a,b) => { return new Date(a.date) - new Date(b.date) })，但是我很难用VueFire来处理它，甚至用它来创建一个Vue过滤器。

如果我能提供其他任何内容，请告诉我。

这就是我的数据库的样子：

这是我的代码：

Answer 1

假设您正在获取帖子并将它们存储在数组[]中，然后使用v-for循环遍历数组并显示帖子。

您可以使用此解决方法：

默认情况下，当您从firebase获取帖子时，您会收到从最旧到最新的帖子
因此您可以使用Array.unshift()方法将帖子添加到您的帖子数组中，从而颠倒添加到您的数组中的项目的顺序
由于项目在数组中以相反的顺序添加，您现在可以使用v-for定期循环播放帖子并显示oosts

Answer 2

最简单的选择（除了使用orderByChild('date')之外）可能是computed property，你可能会遇到这样的事情：

import firebase from './firebase'

var vm = new Vue({
  el: '#example',
  firebase // bring in your firebase module here
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    sortedList: function () {
      // `this` points to the vm instance
      return this.items.sort((a,b) => { return new Date(a.date) - new Date(b.date) })
    }
  }
})

当它依赖于任何属性的变化时，该属性将自动更新，从而保持其实时性和时间性。反应：）

Answer 3

感谢你们两位回复！

我实际上最终做的是在我保存到数据库的列表项中添加另一个值。

我添加了孩子order所以当我将对象保存到firebase时，它看起来像这样：

var newItem = {
  title: "Title to the post",
  order: (this.itemListFromDatabase.length + 1) * -1
}
firebase.database().ref('itemList').push(newItem);

我给它一个负值，因为当你拨打orderByChild()时，它会按升序排序。现在似乎工作得很好。

当我检索我的列表时，它看起来像这样：

firebase: {
  list: firebase.database().ref('list').orderByChild('order')
}

Answer 4

根据Vuefire readme：

如果要进行自动重新绑定（非常类似于计算属性），请使用$ watch并依次调用$ unbind和$ bindAsArray

为firebase变量分配了一个值

firebase: {
  posts: firebase.database().ref('posts')
}

其行为类似于const。要更改其值，必须先取消绑定

this.$unbind('posts')

然后重新分配帖子，例如

。

this.$bindAsArray('posts', postsRef.orderByChild(this.order))

在下面的示例中，我们观察 order 变量，一旦变量发生更改，帖子将被重新分配，并重新分配Firebase的响应

import { postsRef } from '@/firebase' // postsRef = firebase.database().ref('posts')
export default {
  data() {
    return {
      order: 'title' // default order
    }
  },
  firebase: function() {
    return {
      posts: postsRef.orderByChild(this.order)
    }
  },
  methods: {
    setOrder(val) {
      this.order = val
    }
  },
  watch: {
    order: function() {
      if (this.$firebaseRefs.posts) {
        this.$unbind('posts')
      }
      this.$bindAsArray('posts', postsRef.orderByChild(this.order))
    }
  }
}

P.S。我知道这个问题不再重要，但也许会对其他人有所帮助。我也一直坚持这个问题，花了一段时间才知道它是如何工作的。

Answer 5

我有一个非常简单的解决方案，您可以在vuex吸气剂上基于日期字段使用排序方法，或者如果直接使用状态，则可以在组件的计算方法中使用，例如：

const getters = {
  getPosts: state => {
    if (!state.posts) return null;
    return state.posts.sort((a, b) => a.date - b.date);
  },
};

或者如果您的数据字段是Firebase时间戳，则可以这样使用

const getters = {
  getPosts: state => {
    if (!state.posts) return null;
    return state.posts.sort((a, b) => a.date.seconds - b.date.seconds);
  },

这取决于您的日期格式，如果您使用秒，分钟或类似的方式，则此方法可以正常使用。我应该提到，firebase时间戳使用秒。

使用VueFire，如何按降序排列日期列表（从最新到最旧）？

5 个答案: