Question

使用v-for迭代数组时：

<ul id="example-1">
  <li v-for="item in items">
     {{ item.message }}
  </li>
</ul>

元素在彼此之下排序：

列出索引为1的项目
列出索引为2的项目
列出具有索引的项目......
列出索引为n

有没有办法在最后一项上方的当前迭代中添加项目？

列出索引为n
列出具有索引的项目......
列出索引为2的项目
列出索引为1的项目

非常感谢！

Answer 1

您可以使用第二个阵列来＆＃34; stock＆＃34;您的反向数据并使用unshift（而不是push）将每个新元素放在＆＃34;反转＆＃34;的开头。阵列：

＆＃13;

new Vue({
  el: "#app",
  data() {
    return {
      items: ["item 1", "item 2", "item 3"],
      reversedItems: []
    } 
  },
  mounted() {
    this.reversedItems = this.items.reverse()
  },
  methods: {
    loadItem(){
      let i = this.items.length
      this.items.unshift("item " + (i + 1))
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in reversedItems">{{ item }}</li>
  </ul>
  <button @click="loadItem">Load item</button>
</div>

＆＃13;

Answer 2

一个简单的解决方案是使用items prop来反转数组（如果它被用作reversedItems() { return this.items.slice().reverse(); }，则不会将其变异，或者为了保持最初声明的顺序）：new Vue({ el: "#app", data() { return { items: ["item 1", "item 2", "item 3"], } }, computed: { reversedItems() { // Reverse a COPY of the array to avoid messing with its initial order. return this.items.slice().reverse(); }, }, methods: { loadItem() { const i = this.items.length; // Append to the end of the array in a simple approach, // and let the computed property re-order the array. this.items.push("item " + (i + 1)); }, }, });

代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in reversedItems">{{ item }}</li>
  </ul>
  <button @click="loadItem">Load item</button>
</div>

data

请注意，Vue补丁computed property应用于被动数据（如您在reversedItems中声明的变量），因此结果也是被动的。这就是@ sovalina的答案中的items数据对export default was not found in ../actions/actions修改产生反应的原因，而在安装组件时只分配了一次。

使用v-for时的订单

2 个答案: