如何在 Vue JS 中使用 v-for 和 orderBy 过滤器反转数组的顺序？

Question

我正在使用 Vue JS 进行视图模型绑定。在我的 data 对象中，我有一组按升序（从最旧到最新）排序的项目，出于基于代码的原因，我想保持这种方式。

 var v = new Vue({
    el: '#app',
    data: {
        items: [
            {id: 51,  message: 'first'},
            {id: 265, message: 'second'},
            {id: 32,  message: 'third'}
        ],
    }
}

但是，当我在模板中显示数组时，我想颠倒顺序，使其降序（从最新到最旧）。我尝试了以下方法：

 <ol>
    <li v-for="item in items | orderBy -1" track-by="id">

这不起作用，因为 orderBy 过滤器似乎需要一个字段名称作为其第一个参数。

有没有办法在模板中使用 v-for 语法使用 orderBy 过滤器来完成此操作？还是我必须创建一个自定义 reverse 过滤器？

原文由 Soviut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： 以下内容在 Vue 1 中有效，但在 Vue 2 中不推荐使用过滤器，您将看到：’属性或方法“reverse”未在实例上定义，但在渲染期间被引用。’请参阅 tdom_93 对 vue2 的 回答。

您可以创建一个自定义过滤器以相反的顺序返回项目：

 Vue.filter('reverse', function(value) {
  // slice to make a copy of array, then reverse the copy
  return value.slice().reverse();
});

然后在 v-for 表达式中使用：

 <ol>
    <li v-for="item in items | reverse" track-by="id">

https://jsfiddle.net/pespantelis/sgsdm6qc/

原文由 Pantelis Peslis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

简单明了的解决方案：

 <li v-for="item in items.slice().reverse()">
//do something with item ...
</li>

原文由 Nima Ajdari 发布，翻译遵循 CC BY-SA 3.0 许可协议