我目前正在使用 VueJS、Firebase 和 VueFire 创建一个项目。我遇到的问题是订购从最新到最旧的帖子列表。
我尝试使用 Firebase 的内置查询，例如 list.orderByChild('date')，但没有成功。
我知道我需要使用 Array.sort((a,b) => { return new Date(a.date) - new Date(b.date) })，但我很难将其与 VueFire 一起使用，或者甚至用它创建一个 Vue 过滤器。
如果我能提供其他任何东西，请告诉我。
这是我的数据库的样子：
这是我的代码：
【问题讨论】：
标签： javascript firebase firebase-realtime-database vue.js vuefire
假设您正在获取帖子并将它们存储在数组 [] 中，然后使用 v-for 循环遍历数组并显示帖子。
您可以使用此解决方法：
默认情况下，当您从 firebase 获取帖子时，您会从最旧到最新获取帖子
因此您可以使用Array.unshift() 方法将帖子添加到您的帖子数组中，这会颠倒添加到您数组中的项目的顺序
由于项目以相反的顺序添加到您的数组中，您现在可以使用 v-for 定期循环浏览帖子并显示 oots
【讨论】：
最简单的选择（除了使用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) })
}
}
})
当它依赖的任何属性发生变化时，此属性将自动更新，从而保持实时和反应性:)
【讨论】：
感谢两位的回复！
我实际上最终做的是向我保存到数据库的列表项添加另一个值。
我添加了孩子 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')
}
【讨论】：
如果你想要自动重新绑定（很像计算属性），使用 $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))
}
}
}
附： 我知道这个问题不再相关，但也许对其他人有帮助。我也遇到了这个问题，花了一段时间才明白它是如何工作的。
【讨论】：
我有一个非常简单的解决方案，您可以根据您的 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时间戳使用秒。
【讨论】：