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

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

我曾尝试使用Firebase的内置查询，如

list.orderByChild（'date'）

，但没有成功

我知道我需要使用

Array.sort（（a，b）=>{returnnewdate（a.Date）-newdate（b.Date）}）

，但是我很难让它与VueFire一起工作，甚至用它创建Vue过滤器

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

这就是我的数据库的外观：

这是我的密码：

---

假设您正在获取帖子并将其存储在数组[]中，然后使用

v-for

在数组中循环并显示帖子

您可以使用以下解决方法：

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

• 因此，您可以使用

  Array.unshift（）

  方法将帖子添加到您的帖子数组中，从而颠倒添加到数组中的项目的顺序

• 由于项目是按相反的顺序添加到数组中的，因此您现在可以使用

  v-for

  定期在帖子中循环并显示oots

最简单的选择（除了使用

orderByChild（'date'）

）可能是a，其中您会有如下内容：

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

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

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

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

---

当它所依赖的任何属性发生更改时，此属性将自动更新，从而保持实时性和反应性：）

谢谢你们两位的响应

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

我添加了子

顺序

，因此当我将对象保存到firebase时，它看起来像这样：

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

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

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

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

我给它一个负值，因为当您调用

orderByChild（）

时，它将按升序排序。现在似乎工作得很好

当我检索列表时，它如下所示：

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

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

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

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

根据：

如果您想要自动重新绑定（非常类似于计算属性），请使用$watch并调用$unbind，然后调用$bindAsArray

一旦给firebase变量赋值

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

它的行为类似于常量。要更改其值，必须先解除绑定

this.$unbind('posts')

然后用重新排序的帖子重新分配

this.$bindAsArray('posts', postsRef.orderByChild(this.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))
    }
  }
}

附言。

---

我知道这个问题不再相关，但可能对其他人有帮助。我也遇到了这个问题，花了一段时间才理解它的实际工作原理。

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

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

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

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

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

您也可以使用Array.reverse（）来存档，最新条目位于数组的第一个位置。