如何在Vue中保留数组与push方法的前提下拆分数组添加所有元素？

问题出在你直接把整个数组push到目标数组里，导致目标数组变成了嵌套数组（比如basket会变成[[...fruits元素]]），循环时自然会把整个子数组当成单个项渲染。要保留push方法的同时将每个元素单独添加，有两种简单方式：

1. 使用扩展运算符一次性添加所有元素 #

利用ES6的扩展运算符...，把原数组的元素逐个展开作为push的参数，这样就能一次性将所有元素单独加入目标数组：

const fruits = ['苹果', '香蕉', '橙子'];
const basket = [];

function addFruit() {
  // 展开fruits数组，将每个元素单独push进basket
  basket.push(...fruits);
}

addFruit();
// 此时basket = ['苹果', '香蕉', '橙子']，循环时就能逐个渲染

对应你的实际项目场景：

// 从数据库获取的recipients数组
const recipients = [{id:1, name:'张三'}, {id:2, name:'李四'}];
const defaultTags = [];

// 添加到defaultTags时用扩展运算符展开
defaultTags.push(...recipients);
// 此时defaultTags是[{id:1,...}, {id:2,...}]，每个收件人会单独生成标签

2. 遍历原数组逐个push（适合需要额外处理元素的场景） #

如果需要在添加前对每个元素做处理（比如格式化收件人信息），可以用forEach遍历原数组，逐个调用push：

const fruits = ['苹果', '香蕉', '橙子'];
const basket = [];

function addFruit() {
  fruits.forEach(fruit => {
    // 这里可以添加元素处理逻辑，比如给水果加前缀
    const processedFruit = `新鲜${fruit}`;
    basket.push(processedFruit);
  });
}

addFruit();
// basket = ['新鲜苹果', '新鲜香蕉', '新鲜橙子']

项目场景示例：

const recipients = [{id:1, name:'张三'}, {id:2, name:'李四'}];
const defaultTags = [];

recipients.forEach(recipient => {
  // 格式化标签显示文本
  const tagText = `收件人：${recipient.name}`;
  defaultTags.push({...recipient, tagText});
});
// 此时defaultTags每个元素都是单独的收件人对象，包含自定义的tagText，可直接用于生成标签

这两种方式都严格保留了push方法的使用，同时解决了嵌套数组导致的渲染问题，你可以根据是否需要处理元素来选择对应方案。

内容的提问来源于stack exchange，提问作者Maflec