Vue监听user prop变化重新赋值useForm值的实现方案

你的问题核心是useForm初始化后不会自动监听传入的user prop变化，导致每次打开Modal编辑新用户时，表单仍然保留上一次的数据。以下是具体的解决方法：

解决方案：监听user prop变化并更新表单 #

在你的UpdateUser子组件（表单组件）中，通过Vue的watch API监听user prop的变化，一旦用户数据更新，就调用useForm提供的set方法同步表单字段。

示例代码（UpdateUser.vue子组件） #

<script setup>
import { watch } from 'vue'
import { useForm } from '@inertiajs/vue3'
import { useToast } from 'primevue/usetoast'

const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close'])
const toast = useToast()

// 初始化表单，绑定用户初始数据
const form = useForm({
  id: props.user.id,
  studentNumber: props.user.studentNumber,
  email: props.user.email,
  fullName: props.user.fullName,
  fatherName: props.user.fatherName,
  // 其他需要编辑的字段...
})

// 监听user prop的变化，实时更新表单
watch(
  () => props.user,
  (newUser) => {
    // 使用form.set()方法更新表单，确保表单状态正确同步
    form.set({
      id: newUser.id,
      studentNumber: newUser.studentNumber,
      email: newUser.email,
      fullName: newUser.fullName,
      fatherName: newUser.fatherName,
      // 同步所有需要编辑的字段
    })
  },
  { 
    deep: true, // 监听对象内部属性变化
    immediate: false // 初始化时已经赋值，无需重复执行
  }
)

// 提交更新逻辑
const updateUser = () => {
  form.patch(route('users.update', props.user.id), {
    onSuccess: () => {
      toast.add({
        severity: 'success',
        summary: '成功',
        detail: '用户信息已更新',
        life: 3000
      })
      emit('close')
    },
    onError: () => {
      toast.add({
        severity: 'error',
        summary: '失败',
        detail: '用户信息更新失败',
        life: 3000
      })
    }
  })
}
</script>

关键说明 #

1. watch的使用：通过监听props.user的引用或内部属性变化，确保每次选中新用户时都能触发表单更新。deep: true用于处理对象内部字段的变化（如果父组件传递的user对象是同一个引用但字段更新的情况）。
2. form.set()方法：这是Inertia useForm提供的官方方法，用于批量更新表单字段，同时会正确维护表单的dirty、processing等状态，避免直接修改表单对象导致的状态异常。
3. 避免引用问题：如果父组件中userToUpdate.value = prod是直接赋值对象引用，确保每次选中不同用户时prod是不同的对象实例；如果是同一对象修改字段，deep: true的监听会生效。

父组件无需额外修改 #

你当前父组件中的updateUser方法逻辑是正确的：

const updateUser = (prod) => {
  userToUpdate.value = prod;
  updateUserDialog.value = true;
};

只要子组件正确监听user prop变化，就能自动同步最新用户数据到表单。

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