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

Posted 2023-02-22

【中文标题】使用 VueFire，我如何按日期降序排列我的列表（从最新到最旧）？

【英文标题】：Using VueFire, how do I order my list by date in descending order (newest to oldest)?

【发布时间】：2017-09-20 14:24:46

【问题描述】：

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

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

我知道我需要使用 Array.sort((a,b) => return new Date(a.date) - new Date(b.date) )，但我很难将其与 VueFire 一起使用，或者甚至用它创建一个 Vue 过滤器。

如果我能提供其他任何东西，请告诉我。

这是我的数据库的样子：

这是我的代码：

【参考方案1】：

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

您可以使用此解决方法：

默认情况下，当您从 firebase 获取帖子时，您会从最旧到最新获取帖子

因此您可以使用Array.unshift() 方法将帖子添加到您的帖子数组中，这会颠倒添加到您数组中的项目的顺序

由于项目以相反的顺序添加到您的数组中，您现在可以使用 v-for 定期循环浏览帖子并显示 oots

【讨论】：

你也可以使用Array.reverse()来归档，最新的条目在数组的第一个位置。

【参考方案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) )
    
  
)

当它依赖的任何属性发生变化时，此属性将自动更新，从而保持实时和反应性:)

【参考方案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')

【参考方案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 变量，一旦它发生变化，posts 被重新分配，并从 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))
    
  

附： 我知道这个问题不再相关，但也许对其他人有帮助。我也遇到了这个问题，花了一段时间才明白它是如何工作的。

【参考方案5】：

我有一个非常简单的解决方案，您可以根据您的 vuex getter 上的日期字段使用排序方法，或者如果您直接使用您的状态，您可以在组件的计算方法中使用，如下所示：

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时间戳使用秒。