vue.js: reverse the order of v-for loop

Question

I'm looking for something like the code below to display a list of topics from the array right under the box where user adds them. (newest on top) I know I can unshift instead of pushing to change the order topics are stored in the array but is there a way to keep the original array order and just reverse the displayed topics without triggering the "[Vue warn]: You may have an infinite update loop in a component render function."?

<div class="field add-topic">
    <label for="add-topic">Add a Topic (press Tab):</label>
    <input type="text" name="add-topic" @keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.reverse()" :key="index">
    <label for="topic">Topics:</label>
    <input type="text" name="topic" v-model="topics[index]">
</div>

Pierre Said · Accepted Answer · 2025-06-12 12:13:40Z

10

the method toReversed method will create a reversed copy of your array.

topics.toReversed();

  <div v-for="(tpc, index) in topics.toReversed()" :key="index">
    <label for="topic">Topics:</label>
    <input type="text" name="topic" v-model="topics[index]">
  </div>

More info : https://stackoverflow.com/a/30610528/5671919

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

edited Jun 12 at 12:13

answered Jan 20, 2020 at 17:48

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

krzwierz79 Over a year ago

Thanks Pierre , your code didn't actually do it for me but using slice().reverse() to create a new array and iteraring on this one instead works perfectly.

Wes Harper Over a year ago

I would prefer a computed property in this case to do the reversal and copying logic, then you can just use v-for on the computed prop name. You can also use the spread operator to create a copy: [...topics].reverse().

Collectives™ on Stack Overflow

vue.js: reverse the order of v-for loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related