修复表单提交数据丢失bug时遇useVuelidate类型兼容问题求助

问题背景 #

需要修复表单提交时部分数据丢失的Bug，同时在使用useVuelidate时遇到TypeScript类型错误。

定义的TypeScript接口 #

interface Location {
  _id: string
  name: string
  coords?: number[] 
  createdAt?: Date
  updatedAt?: Date
  deletedAt?: Date
}

Props定义 #

props: {
  data: {
    type: Object as PropType<Location>,
    default: () => ({
      _id: null,
      name: '',
      createdAt: '',
      updatedAt: ''
    })
  }
},

v-model创建及验证代码 #

const location = reactive({ ...props.data } as Location)

const rules = {
  name: { required },
  coords: { required }
}
const v$ = useVuelidate(rules, location)

遇到的类型错误（翻译后） #

属性'name'的类型不兼容。
类型'string'无法赋值给类型'Ref'。
76 | coords: { required }
77 | }

78 | const v$ = useVuelidate(rules, location)

解决步骤 #

1. 修正Props默认值的类型不匹配问题 #

Props默认值与Location接口类型不一致，会导致类型推断错误，需调整：

• _id接口定义为string，默认值从null改为''
• createdAt/updatedAt接口定义为Date，默认值从''改为undefined（或根据业务需求设为new Date()）

修正后的Props：

props: {
  data: {
    type: Object as PropType<Location>,
    default: () => ({
      _id: '',
      name: '',
      createdAt: undefined,
      updatedAt: undefined
    })
  }
},

2. 解决useVuelidate的类型错误 #

该错误源于useVuelidate的类型期望验证目标为Ref对象，可通过以下方式修复：

方式一：用toRefs转换reactive对象为Ref集合

const location = reactive({ ...props.data } as Location)
const locationRefs = toRefs(location)

const rules = {
  name: { required },
  coords: { required }
}
const v$ = useVuelidate(rules, locationRefs)

方式二：直接用ref包裹对象（适合简单结构）

const location = ref({ ...props.data } as Location)

const rules = {
  name: { required },
  coords: { required }
}
const v$ = useVuelidate(rules, location.value)

3. 修复表单提交数据丢失问题 #

数据丢失多因响应式关联失效或未获取最新值：

• 提交时直接使用响应式对象的最新值，例如{ ...location }
• 若props.data为异步更新，需监听props变化并同步到location：

watch(() => props.data, (newData) => {
  Object.assign(location, newData)
}, { deep: true })

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