vue3 数组对象增加新字段

在Vue3中，当你需要给数组对象中的每个元素添加新字段时，通常会在组件的data或methods中定义一个计算属性或者在循环处理数据的时候动态更新。以下是基本步骤：

1. 定义一个原始数组，假设它是一个对象数组：

data() {
  return {
    items: [
      { name: 'Item 1', price: 10 },
      { name: 'Item 2', price: 20 }
    ]
  };
}

2. 使用`map()` 或 `forEach()` 方法遍历数组，然后对每个对象添加新字段：

// 使用 map 方法
this.items = this.items.map(item => ({ ...item, newField: 'New Value' }));

// 或者使用 forEach 方法
this.items.forEach((item, index) => {
  this.items[index] = { ...item, newField: 'New Value' };
});

这里我们使用了扩展运算符 `...` 来创建一个新的对象，复制原对象的所有属性，并添加新的`newField`。

3. 如果这个操作经常发生，你可以考虑将添加新字段的函数封装成一个计算属性：

computed: {
  updatedItems() {
    return this.items.map(item => ({ ...item, newField: 'New Value' }));
  }
},

现在每次访问`updatedItems`，新字段都会自动应用到数组的所有对象上。