Vuetify调用表单reset方法报错，组合式API下如何正确重置表单？

你遇到的Property 'reset' does not exist on type '{}'报错，本质是你绑定的表单ref未指定正确的TypeScript类型，默认被推导为空对象类型，无法识别Vuetify表单实例自带的方法。
相关代码参考截图：

正确实现步骤 #

• 第一步：导入VForm类型，给ref声明正确类型

import { ref } from 'vue'
// Vuetify 3 导入VForm类型
import type { VForm } from 'vuetify/components'

// 声明表单ref，允许为空
const formRef = ref<InstanceType<typeof VForm> | null>(null)

• 第二步：模板中绑定ref到v-form组件

<template>
  <v-form ref="formRef" v-model="formModel">
    <!-- 表单项内容 -->
    <v-btn @click="handleReset">重置表单</v-btn>
  </v-form>
</template>

• 第三步：安全调用重置方法

const handleReset = () => {
  // 可选链调用避免ref未挂载时报错
  formRef.value?.reset()
  // 若只需清空校验状态，不用重置字段值，可调用resetValidation
  // formRef.value?.resetValidation()
}

补充说明 #

• 如果你使用的是Vuetify 2，只需调整类型导入路径为对应Vuetify 2的表单组件类型即可，逻辑一致。
• reset()方法会将所有表单项重置为初始化时的默认值，同时清空校验状态，符合绝大多数重置场景需求。

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