Vue.js中如何向现有数组推送对象？代码场景求助

你的代码目前存在一个关键问题：原生HTML的<select>只能处理字符串类型的value值，当你把item对象绑定到:value="item"时，浏览器会自动把对象转换为字符串"[object Object]"，所以你推到newItems里的并不是你期望的对象。下面是两种可行的解决方法：

方法1：使用v-model绑定选中项（推荐） #

这种方法更符合Vue的响应式设计思路，代码更简洁直观：

修改Blade模板： #

<select v-model="selectedItem" @change="onChange" class="form-control">
  <option value="" selected disabled>Choose</option>
  <option v-for="item, key in items" :value="item">@{{ item.name }}</option>
</select>

修改Vue的methods与data： #

data() {
  return {
    items: [], // 你的原始选项数组
    newItems: [], // 存储选中对象的目标数组
    selectedItem: null // 用于绑定选中项
  }
},
methods: {
  onChange() {
    // 先判断是否选中了有效项，避免推送空值
    if (this.selectedItem) {
      // 用展开运算符创建对象副本，避免后续修改原始对象影响已推送的项
      this.newItems.push({...this.selectedItem});
      console.log(this.selectedItem);
    }
  }
}

方法2：通过原生事件获取选中的对象 #

如果你不想使用v-model，可以通过事件对象定位到选中的选项索引，再从原始数组中取出目标对象：

保持Blade模板不变： #

<select @change='onChange($event)' class="form-control">
  <option value="" selected disabled>Choose</option>
  <option v-for='item,key in items' :value="item">@{{ item.name }}</option>
</select>

修改Vue的methods： #

methods: {
  onChange(event) {
    const selectedIndex = event.target.selectedIndex;
    // 跳过第一个禁用的默认选项
    if (selectedIndex > 0) {
      // 因为默认选项占了第一个位置，所以要减1匹配原始数组的索引
      const selectedItem = this.items[selectedIndex - 1];
      this.newItems.push({...selectedItem}); // 创建对象副本避免引用同步问题
      console.log(selectedItem);
    }
  }
}

额外提示： #

• 为什么要用{...selectedItem}？如果直接推送对象的引用，后续如果items里的对象被修改，newItems里的对应项也会跟着变化。用展开运算符创建新的对象副本，可以避免这种意外的引用同步。
• 务必在Vue的data中初始化newItems为空数组，否则可能会出现push方法不存在的报错。

内容的提问来源于stack exchange，提问作者Sayed Sajad Hosseini