Vue DatePicker结合InertiaJS useForm值无法保留，如何解决？

问题核心原因 #

1. VueDatePicker默认v-model绑定的是Date对象，而Inertia的useForm在preserveState时，对Date对象的序列化/反序列化处理会导致状态丢失或类型不匹配。
2. 你在submit函数中直接将formData.birthDate修改为字符串格式，破坏了组件期望的Date对象类型，跳转后组件无法识别字符串值，导致无法回显。

解决方案 #

方案1：让组件直接绑定字符串格式日期 #

修改VueDatePicker的配置，让v-model直接返回格式化后的字符串，和formData的初始类型保持一致，这样preserveState能正确保留值：

<template>
  <VueDatePicker 
    v-model="formData.birthDate"
    class="datepicker" 
    calendar-class="datepicker_calendar"
    :enable-time-picker="false"
    format="DD-MM-YYYY" <!-- 日历显示格式 -->
    model-value-format="DD-MM-YYYY" <!-- v-model返回的字符串格式 -->
  >
  </VueDatePicker>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'

const formData = useForm('Form1', {
    name: '',
    birthDate: ''
});

function submit() {
    // 此时birthDate已经是目标字符串格式，无需额外转换
    formData.post(route('form.submit.path'), {
        preserveState: true,
        preserveScroll: true,
        onSuccess: () => {
            nextStep()
        }
    })
}
</script>

方案2：保留Date对象，提交时仅转换请求参数 #

不修改组件的绑定类型，而是在提交时单独处理日期格式，避免破坏formData中的原始Date对象，这样preserveState能正确保留Date对象，组件可正常回显：

<script setup>
import { useForm } from '@inertiajs/vue3'
import moment from 'moment'

const formData = useForm('Form1', {
    name: '',
    birthDate: null // 初始值设为null，匹配Date对象类型
});

function submit() {
    // 单独构造请求数据，不修改原始formData的状态
    const submitData = {
        ...formData.data(),
        birthDate: moment(formData.birthDate).format('DD-MM-YYYY')
    }

    formData.post(route('form.submit.path'), {
        preserveState: true,
        preserveScroll: true,
        data: submitData, // 传入转换后的请求参数
        onSuccess: () => {
            nextStep()
        }
    })
}
</script>

补充注意事项 #

• 确保useForm的唯一键（此处为Form1）在跳转前后保持一致，Inertia依赖该键识别并保留对应表单状态。
• 若采用方案2，初始值建议设为null而非空字符串，避免组件初始化时出现类型不匹配的问题。

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