2

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>
krzwierz79
  • 23
  • 1
  • 5

1 Answers1

8

the slice method will create a copy of your array. Use it before reverse to only reverse the copy.

topics.slice().reverse();

  <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.slice().reverse()" :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

Pierre Said
  • 3,660
  • 1
  • 16
  • 28
  • 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. – krzwierz79 Jan 20 '20 at 17:59
  • 4
    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()`. – Wes Harper Jan 20 '20 at 22:28