CODEWITHSUNDEEP
vue.jsreversev-for
krzwierz79
krzwierz79

Reputation: 23

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>

Upvotes: 2

Views: 4172

Answers (1)

Pierre Said
Pierre Said

Reputation: 3830

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

Upvotes: 8

Related Questions