vue.js：反转v-for循环的顺序

Question

我正在寻找类似于下面代码的内容，以在用户添加主题的框下方显示数组中的主题列表。（最新的置顶）我知道我可以 unshift 而不是推动更改顺序主题存储在数组中但是有没有办法保持原始数组顺序并且只是反转显示的主题而不触发 “[Vue 警告]：组件渲染函数中可能存在无限更新循环。”?

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

更多信息：

vue.js：反转v-for循环的顺序

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

reverse

vue.js

v-for