Vue.js中如何将单个对象合并到数组对象中？

你当前代码的核心问题是：placeholder是单个对象，并非数组，无法调用数组的map方法，这会直接触发报错。要将单个对象合并到目标数组中，以下是几种简单可行的写法：

方法1：使用数组concat方法（推荐） #

concat方法支持接收单个元素或数组作为参数，直接将其追加到原数组末尾：

created() {
  const request = axios.get("***api_url***").then(response => {
    const result = response.data;
    const placeholder = { 'id': 0, 'name': '[Select]' };
    // 直接传入单个对象即可，也可包裹成数组传入，效果一致
    const newObject = result.concat(placeholder);
    console.log(newObject);
  });
}

方法2：使用ES6扩展运算符 #

通过扩展运算符展开原数组，再拼接新对象，写法更简洁：

created() {
  const request = axios.get("***api_url***").then(response => {
    const result = response.data;
    const placeholder = { 'id': 0, 'name': '[Select]' };
    const newObject = [...result, placeholder];
    console.log(newObject);
  });
}

方法3：将占位符放到数组开头（适合下拉选择场景） #

如果需要把[Select]选项放在最前面，可直接通过数组字面量拼接，避免修改原数组：

created() {
  const request = axios.get("***api_url***").then(response => {
    const result = response.data;
    const placeholder = { 'id': 0, 'name': '[Select]' };
    const newObject = [placeholder, ...result];
    console.log(newObject);
  });
}

内容的提问来源于stack exchange，提问作者Hai Truong IT