vue2 js 循环往数组里插入数据

在 Vue.js 中，如果你需要在循环中向数组插入数据，你可以使用 `v-for` 指令配合 `this.$set()` 方法。这是因为 Vue 的响应式数组默认不会监听当你在已存在的索引位置插入新值的情况，所以直接添加到数组会忽略这些更改。以下是示例：

假设你有一个 `items` 数组，你想在每次循环迭代中追加新的项：

<template>
  <div v-for="(item, index) in items" :key="index">
    <!-- 这里的 {{ item }} 是当前遍历到的对象 -->
    <button @click="addNewItem">添加新项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  methods: {
    addNewItem() {
      // 使用 this.$set 更新数组并设置新的索引，Vue 将能够检测到这个变化
      this.$set(this.items, this.items.length, { id: newId, value: '新项' });
    },
  },
};
</script>

在这个例子中，每点击“添加新项”按钮，都会创建一个新的对象，并使用 `this.items.length` 来获取当前数组的最后一个索引，然后通过 `this.$set` 方法将其插入到对应的位置。