javascript - 如何对 li 进行反向排序

Question

我正在尝试对无序列表进行反向排序(vueJS 2.x)，但我似乎找不到任何关于过滤器的文档，就像以前在 vue 1.x 中那样(类似于 Angular 1 的方式)做到了)

例如:

<li v-for="message in messages | orderBy 'name' -1">

但这不再有效了。

我在这里尝试使用计算属性:

computed: {
  reverse: function() {
    return this.messages.reverse();
  }
}

哪种 有效，但一旦通过页面上的表单提交新消息，列表项就不会保持反转。

目标是始终保持列表项反转。

我已经尝试将反向函数附加到其他生命周期 Hook ，例如 beforeCreate 和 updated，但似乎没有任何效果。我错过了什么？

Answer 1

过滤器确实在 Vuejs 2 中消失了...相反，您使用 computed properties正如您所尝试的那样:

<li v-for="message in sortedMessages">

然后:

computed: {
  sortedMessages: function() {
    return this.messages.slice().sort(function(message1, message2) {
        var name1 = message1.name.toLowerCase();
        var name2 = message2.name.toLowerCase();
        if(name1 < name2) return 1;
        if(name1 > name1) return -1;
        return 0;
    })
  }
}

希望这对您有所帮助!