vue. js: обратный порядок цикла v-for

Question

Я ищу что-то вроде приведенного ниже кода, чтобы отобразить список тем из массива прямо под полем, в котором пользователь добавляет их. (самое новое сверху) Я знаю, что могу отменить смену вместо нажатия, чтобы изменить порядок тем, которые хранятся в массиве, но есть ли способ сохранить исходный порядок массивов и просто изменить отображаемые темы, не вызывая "[Vue warn] : У вас может быть бесконечное обновление l oop в функции рендеринга компонента. "?

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

Answer 1

метод slice создаст копию вашего массива. Используйте его перед reverse только для переворачивания копии.

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>

Дополнительная информация: { ссылка }