在 Vue 中，使用 $set 方法向对象数组添加新对象，每次都添加到数组的末尾，而不是指定一个固定的索引

在 Vue 中，使用 $set 方法向对象数组添加新对象时，如果你希望每次都添加到数组的末尾，而不是指定一个固定的索引，你可以简单地使用数组的 push 方法。然而，由于 Vue 不能检测到数组长度的变化（这是 Vue 2.x 的一个限制，Vue 3.x 有所改进），push 方法可能不会触发视图更新，除非你在 Vue 3 中使用了响应式引用或者 Vue 2 中使用了 Vue.set 来确保响应性。但在大多数情况下，对于对象数组，push 方法是足够的，因为 Vue 可以检测到数组元素的变化。

不过，如果你确实需要使用 $set（可能是因为你在一个深层嵌套的属性上操作，或者出于其他需要确保响应性的原因），你可以通过计算数组当前的长度来确定新元素的索引。但是，对于添加到数组末尾的情况，通常不需要这样做，因为 push 已经足够。

下面是一个使用 push 方法向对象数组添加新对象的例子：

<template>  
  <div>  
    <button @click="addItem">Add Item</button>  
    <ul>  
      <li v-for="(item, index) in items" :key="item.id">  
        {{ item.name }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      items: [  
        { id: 1, name: 'Item 1' },  
        { id: 2, name: 'Item 2' },  
        // ... 其他项  
      ]  
    };  
  },  
  methods: {  
    addItem() {  
      const newItem = { id: Date.now(), name: 'New Item' };  
      this.items.push(newItem); // 直接使用 push 方法添加到数组末尾  
    }  
  }  
};  
</script>

如果你确实需要使用 $set（尽管在这种情况下不是必需的），你可以这样做：

<script>  
export default {  
  // ... 其他代码  
  methods: {  
    addItem() {  
      const newItem = { id: Date.now(), name: 'New Item' };  
      this.$set(this.items, this.items.length, newItem); // 使用 $set，但索引是数组的当前长度  
    }  
  }  
};  
</script>

在这个例子中，this.$set(this.items, this.items.length, newItem); 实际上和 this.items.push(newItem); 是一样的效果，因为 this.items.length 就是数组当前末尾的下一个索引。但是，使用 push 通常更简洁且易于理解。