如何在Vue的ref数组中添加元素且不覆盖原有内容

先纠正你的核心错误 #

你用 addItemCart.value.push = newItem 是完全错误的语法——push 是数组的方法，不是变量，不能直接赋值。正确的调用方式是 addItemCart.value.push(newItem)，这才是往响应式数组里追加元素的正确姿势。之前的错误写法会覆盖数组原型上的 push 方法，导致 Vue 的响应式 Proxy 异常，自然没法渲染数据。

完整实现步骤 #

1. 声明响应式数组
   你用 ref([]) 声明数组是没问题的，保持这个写法：

import { ref } from 'vue'
const addItemCart = ref([])

2. 处理复选框勾选事件
   给复选框绑定 @change 事件，传入当前选中的项，同时判断是否重复添加（避免用户多次勾选同一内容）：

<template>
  <!-- 示例复选框列表 -->
  <div v-for="item in sourceList" :key="item.id">
    <input 
      type="checkbox" 
      :value="item" 
      @change="handleCheck(item, $event.target.checked)"
    >
    <span>{{ item.name }}</span>
  </div>

  <!-- 渲染表格 -->
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>详情</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="cartItem in addItemCart" :key="cartItem.id">
        <td>{{ cartItem.name }}</td>
        <td>{{ cartItem.desc }}</td>
      </tr>
    </tbody>
  </table>
</template>

对应的事件处理函数：

const handleCheck = (item, isChecked) => {
  if (isChecked) {
    // 先判断是否已存在，避免重复添加
    const isExist = addItemCart.value.some(cartItem => cartItem.id === item.id)
    if (!isExist) {
      addItemCart.value.push(item)
    }
  } else {
    // 取消勾选时从数组中移除对应项（可选需求）
    const index = addItemCart.value.findIndex(cartItem => cartItem.id === item.id)
    if (index !== -1) {
      addItemCart.value.splice(index, 1)
    }
  }
}

3. 为什么这样能生效？
   Vue 的 ref 数组是通过 Proxy 包装的响应式对象，调用原生数组方法（push/splice 等）时，Vue 能自动检测到数组的变化，触发视图更新。而你之前错误地给 push 赋值，破坏了数组的原生方法，导致响应式失效。

额外注意点 #

• 一定要给 v-for 绑定唯一的 key（比如数据的 id），避免渲染混乱。
• 如果不需要取消勾选时移除内容，可以去掉 else 分支的逻辑，只处理勾选添加的情况。

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