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

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

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>

Solution

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