Vue3+Laravel中删除表格行后如何同步更新ref数组？

核心解决思路 #

Vue3中ref定义的数组是响应式的，但需要用正确的数组操作方式触发响应式更新。以下两种方法都能实现表格行删除后同步更新addItemCart数组：

方法一：使用filter重新赋值（推荐）

filter返回新数组，直接赋值给ref的value属性，Vue会自动检测到数组变化并同步更新：

const removeItem = (deletedId) => {
  // 过滤掉ID匹配的元素，返回新数组
  addItemCart.value = addItemCart.value.filter(item => item.id !== deletedId)
}

方法二：使用splice修改原数组

先通过findIndex找到对应元素的索引，再用splice删除，这种直接修改原数组的方式也能触发Vue的响应式更新：

const removeItem = (deletedId) => {
  const targetIndex = addItemCart.value.findIndex(item => item.id === deletedId)
  // 找到索引后删除对应元素
  if (targetIndex !== -1) {
    addItemCart.value.splice(targetIndex, 1)
  }
}

注意事项 #

• 确保ID类型一致：要保证你获取到的deletedId和数组中item.id的类型相同（比如都是数字或字符串），否则会因类型不匹配导致过滤失败。
• 避免DOM操作获取ID：推荐在模板中直接传递当前元素的ID，比如点击删除按钮时绑定item.id，这样比从DOM节点获取更可靠：

<template>
  <table>
    <tr v-for="item in addItemCart" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.category }}</td>
      <td><button @click="removeItem(item.id)">删除</button></td>
    </tr>
  </table>
</template>

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