javascript - How to show array in reverse in VUE? - Stack Overflow

admin管理员组

文章数量:1026989

I have simple array with items in which I push new ones from time to time. New items es 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:

1. 4, d
2. 3, c
3. 2, b
4. 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.

I have simple array with items in which I push new ones from time to time. New items es 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:

1. 4, d
2. 3, c
3. 2, b
4. 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.

• javascript
• arrays
• sorting
• vuejs2

Share Improve this question Follow edited Aug 25, 2017 at 12:21 Kin asked Aug 25, 2017 at 12:13 KinKin 4,5961414 gold badges5959 silver badges114114 bronze badges 5

• 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 Commented Aug 25, 2017 at 12:16
• @user3492940 i dont need actually reverse it. I need only show in table it in reverse. – 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 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 Commented Aug 25, 2017 at 12:19
• @Deancoakley there are no such id. I need to use index instead – Kin Commented Aug 25, 2017 at 13:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Just use a puted 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: []
  },
  puted: {
    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./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>

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./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>

I have simple array with items in which I push new ones from time to time. New items es 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:

1. 4, d
2. 3, c
3. 2, b
4. 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.

I have simple array with items in which I push new ones from time to time. New items es 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:

1. 4, d
2. 3, c
3. 2, b
4. 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.

• javascript
• arrays
• sorting
• vuejs2

Share Improve this question Follow edited Aug 25, 2017 at 12:21 Kin asked Aug 25, 2017 at 12:13 KinKin 4,5961414 gold badges5959 silver badges114114 bronze badges 5

• 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 Commented Aug 25, 2017 at 12:16
• @user3492940 i dont need actually reverse it. I need only show in table it in reverse. – 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 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 Commented Aug 25, 2017 at 12:19
• @Deancoakley there are no such id. I need to use index instead – Kin Commented Aug 25, 2017 at 13:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Just use a puted 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: []
  },
  puted: {
    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./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>

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./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>

本文标签： javascriptHow to show array in reverse in VUEStack Overflow