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

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

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

我已尝试将反向功能附加到其他生命周期挂钩，例如beforeCreate并更新但似乎没有任何效果。我错过了什么？

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

希望这有帮助！

Answer 2

在vueJS 2.x文档的迁移部分中，there is a note on replacing the orderBy filter，

正如它所提到的，你应该只能使用像lodash's orderBy这样的函数：

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

computed: {
  Orderedmessages: function () {
    return _.orderBy(this.messages, ['name'], ['desc'])
  }

Answer 3

如果您只需要在UI中对列表进行排序，那么使用CSS，您不再需要在模型中对其进行排序。

表示垂直列表：

ul{
    display: flex;
    flex-direction: column-reverse;
}

表示水平列表：

ul{
    display: flex;
    flex-direction: row-reverse;
}

Answer 4

你必须要小心，因为Array.reverse具有破坏性，会导致无限循环。当您尝试使用Array.sort时，您将遇到相同的情况。你可以这样做，而不是你使用副本时所拥有的：

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

如何反向排序li

4 个答案: