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

Question

我正在使用Vue JS来执行viewmodel绑定.在我的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过滤器？

Answer 1

简洁明了的解决方案:

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

Answer 2

我只是改变了显示的顺序，而不是颠倒创建元素的顺序。

<ol class="reverseorder">
    <li v-for="item in items" track-by="id">

还有我的 CSS

<style>
.reverseorder {
  display: flex;
  flex-direction: column-reverse;
}
</style>

无需克隆数组并反转它。

Answer 3

更新Vue2

我想展示一些方法,您可以使用数据而不使用过滤器,因为它们在Vue2 中已弃用:

内部计算属性

使用计算属性代替过滤器,这要好得多,因为您可以在组件中的任何地方使用该数据,而不仅仅是在模板中: jsFiddle

computed: {
    reverseItems() {
        return this.items.slice().reverse();
  }     
}

在Vuex getter属性内

如果您正在使用Vuex,则将数据存储在store.state对象中.使用状态存储的数据进行某些转换的最佳方法是在getters对象中执行此操作(例如,通过项目列表进行过滤并计算它们,反向顺序等等...)

getters: {
    reverseItems: state => {
        return state.items.slice().reverse();
    }
}

并从组件计算属性中的getter中检索状态:

computed: {
    showDialogCancelMatch() {
        return this.$store.state.reverseItems;
    }
}

Answer 4

注意:以下工作在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/