How to show array in reverse in VUE?

Question

I have simple array with items in which I push new ones from time to time. New items comes via ajax;

items.push({id: 1, title: 'a'});
items.push({id: 2, title: 'b'});
items.push({id: 3, title: 'c'});
items.push({id: 4, title: 'd'});

The main thing is that I need to show them in reverse like:

4, d
3, c
2, b
1, a

The problem is that I cant use unshift as I need to have index to items as I will need to do interactions with specific items.

So basically I'm searching for a way to push items but show them like it was unshift. Not actually reverse array.

You could use array.reverse, or array.reduceRight to reverse the array when you are done pushing values I guess. Using reduceRight you could even add the original index to the object so it is available as property. — enf0rcer
– enf0rcer, Commented Aug 25, 2017 at 12:16
@user3492940 i dont need actually reverse it. I need only show in table it in reverse. — Kin
– Kin, Commented Aug 25, 2017 at 12:17
so I can imagine you are using the v-repeat directive. Perhaps you could call array.reverse inline in the directive: <div v-repeat="item in array.reverse()"></div>. I don't use vue a lot but I can imagine this would work. — enf0rcer
– enf0rcer, Commented Aug 25, 2017 at 12:19
I am beginner at Vue but I think <li v-for="item in items | orderBy 'id' -1" track-by="id"> should work — Dean Coakley
– Dean Coakley, Commented Aug 25, 2017 at 12:19
@Deancoakley there are no such id. I need to use index instead — Kin
– Kin, Commented Aug 25, 2017 at 13:12

kevguy · Accepted Answer · 2017-08-25 13:20:12Z

Just use a computed property and you're done. The reverse method will reverse the items in an array in place, so I used the slice method to create a new one.

As for the unshift thing, the update order is already there when you use the push method, so the order is just as simple as reverse the original array, you don't need to worry about it.

const app = new Vue({
  el: '#app',
  data: {
    items: []
  },
  computed: {
    reversedArr() {
      return this.items.slice().reverse()
    }
  },
  created() {
    this.items.push({id: 1, title: 'a'})
    this.items.push({id: 2, title: 'b'})
    this.items.push({id: 3, title: 'c'})
    this.items.push({id: 4, title: 'd'})
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="app">
  <div>
    <h3>Original</h3>
    <ul>
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <div>
    <h3>Reversed</h3>
    <ul>
      <li v-for="item in reversedArr">{{item}}</li>
    </ul>
  </div>
</div>

lsv · Accepted Answer · 2017-08-28 12:17:38Z

1

new Vue({
  el: '#example',
  data: {
    items:[]
  },
  mounted(){
    this.items.push({id: 1, title: 'a'})
    this.items.push({id: 2, title: 'b'})
    this.items.push({id: 3, title: 'c'})
    this.items.push({id: 4, title: 'd'})
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<div id="example">
  <div v-for="(item,index) in items.reverse()">
    {{index+1}}. {{item.id}},{{item.title}}
  </div>
</div>

edited Aug 28, 2017 at 12:17

answered Aug 25, 2017 at 12:41

lsv

7865 silver badges16 bronze badges

5 Comments

Kin Over a year ago

[Vue warn]: You may have an infinite update loop in a component render function.

thanksd Over a year ago

@Kin this code snippet works, so your error must be caused by a typo in your code. Are you sure you're calling arr.reverse() and not this.reverse()?

thanksd Over a year ago

You can go even simpler by calling items.reverse() inline. <div v-for="(item, index) in items.reverse()">

csum Over a year ago

beware reverse() modifies the array, so you first need to make a copy of it with slice() as mentioned in @kevguy's answer. Otherwise you will get unexpected results whenever you push new items.

caspii Over a year ago

⚠️ This is not a good solution. If you have arrays of any significant length you get the warning [Vue warn]: Maximum recursive updates exceeded.. Instead, use @kevguy s method instead

Collectives™ on Stack Overflow

How to show array in reverse in VUE?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related