Vue2更新

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

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 3

注意：以下适用于Vue 1，但在Vue 2过滤器中已弃用且您已弃用会看到：＆＃39;财产或方法＆＃34;反向＆＃34;没有定义实例，但在渲染期间引用。＆＃39;请参阅 tdom_93＆＃39> 的答案 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/

Answer 4

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

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

还有我的CSS

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

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

Answer 5

v-for指令不支持向后迭代，因此如果您想按最新顺序进行排序，则需要添加另一个字段来指示项目的添加时间，或者将id更改为增量每次添加一个项目。

然后，field是指示添加订单的字段：

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

Answer 6

对于我的用例（显然，它与OP有所不同...），我想在v-for“循环”中以相反的顺序使用数组的索引。< / p>

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

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

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

Answer 7

您可以使用lodash reverse：

<li v-for="item in _.reverse(items)">

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

7 个答案:

Vue2更新