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

JavaScript

逆天理查德

2020-03-11

我正在使用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过滤器？

第759篇《如何在Vue JS中使用v-for和orderBy过滤器反转数组的顺序？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
阿飞蛋蛋 2020.03.11

Vue2更新

我想展示一些可以处理数据而不使用过滤器的方法，因为Vue2 中不推荐使用过滤器：

内部计算属性

使用计算属性代替过滤器，这会更好，因为您可以在组件中的所有位置使用该数据，而不仅仅是在模板中使用： jsFiddle

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

在Vuex getter属性内

如果您使用的是Vuex，并且您将数据存储在store.stateobject中。对状态中存储的数据进行转换的最好方法是在getters对象中进行转换（例如，对项目列表进行过滤并对其进行计数，颠倒顺序等）。

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

并从组件计算属性的getter获取状态：

computed: {
    showDialogCancelMatch() {
        return this.$store.state.reverseItems;
    }
}
前端前端猴子 2020.03.11

简单明了的解决方案：

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

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

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

还有我的CSS

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

无需克隆阵列并将其反转。

十三小哥 2020.03.11

对于我的用例（显然，它与OP不同），我想在v-for“循环”中以相反的顺序排列数组的索引。

我的解决方案是创建一个Vue应用程序方法reverseRange(length)，该方法返回一个从长度1到0的整数数组。然后，我在v-for指令中使用了它，并在myArray[index]每次需要时简单地引用Array元素。

这样，索引是相反的顺序，然后我就可以使用它们来访问数组的元素。

希望对像我这样对自己的要求有细微差别的人有所帮助。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android