1

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

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

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

让我知道我是否可以提供其他任何东西。

这是我的数据库的样子：

1

这是我的代码：

2

4

5 回答 5

1

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

您可以使用此解决方法：

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

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

  • 由于这些项目是在您的数组中以相反的顺序添加的，您现在可以使用v-for并显示 oots定期循环查看帖子

于 2017-04-24T06:18:24.263 回答
1

The most easy option (besides using orderByChild('date')) would probably be a computed property, where you would have something like this:

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

this property will automatically update when any of the properties it depends on changes thus keeping it al real time & reactive :)

于 2017-04-24T09:19:30.910 回答
0

我有一个非常简单的解决方案，您可以根据您的 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时间戳使用秒。

于 2020-06-16T06:22:33.020 回答
0

根据Vuefire 自述文件：

如果您想自动重新绑定（非常像计算属性），请使用 $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))
    }
  }
}

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

于 2018-10-08T15:31:28.727 回答
0

谢谢你们两位的回复！

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

我添加了孩子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')
}
于 2017-04-24T14:04:55.643 回答