为什么我的表单提交后无法正确执行CRUD中的更新操作？

FSD-菲菲提问于 2026-03-11 10:35:20 阅读 8

交互

我在做一个简单的用户信息管理页面，新增和删除都能正常工作，但点击“编辑”后提交表单，数据根本没更新到列表里。我试过在 update 函数里加 console.log，发现传入的 id 是对的，但 state 没变。

这是我的编辑表单部分代码：

<form @submit.prevent="updateUser">
  <input v-model="editingUser.name" placeholder="姓名" />
  <input v-model="editingUser.email" placeholder="邮箱" />
  <button type="submit">保存修改</button>
</form>

是不是因为 Vue 的响应式机制没触发？还是我更新数组的方式有问题？

我来解答赞 6 收藏

反馈

1 条解答

UX米娅 Lv1

问题是你直接用索引修改数组元素了，比如 this.users[index] = xxx 这样写 Vue 检测不到变化。

改成这样：

updateUser() {

  const index = this.users.findIndex(u => u.id === this.editingUser.id)

  if (index !== -1) {

    this.users.splice(index, 1, { ...this.editingUser })

  }

  this.editingUser = null

}

或者用 this.$set：

this.$set(this.users, index, { ...this.editingUser })

2026-03-11 11:01