Vue 3表单重置问题：调用reset()无效，求排查错误原因

问题原因 #

你当前的代码存在两个关键问题：

1. 原生表单的reset()方法只会将表单元素恢复到页面加载时的初始值，但你的表单是通过Vue响应式数据userForm做双向绑定的，原生reset()不会修改userForm的属性值，所以输入框内容不会被清空。
2. 代码中使用了reactive但没有导入，这会导致运行报错（可能是你粘贴代码时遗漏了）。

解决方案 #

方案一：直接重置响应式数据（推荐）

这是Vue项目中最常用的方式，直接将userForm的所有属性重置为空值，符合Vue的响应式逻辑：

<template>
  <form @submit.prevent="addNewUser" ref="newUserForm">
    <!-- 示例表单输入框（需和userForm做双向绑定） -->
    <input v-model="userForm.name" type="text" placeholder="姓名" />
    <input v-model="userForm.email" type="email" placeholder="邮箱" />
    <input v-model="userForm.telephone" type="tel" placeholder="电话" />
    <textarea v-model="userForm.address" placeholder="地址"></textarea>
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { ref, reactive } from "vue"; // 必须导入reactive

const newUserForm = ref();

const userForm = reactive({
  id: "",
  name: "",
  email: "",
  telephone: "",
  address: "",
});

// 封装重置函数，方便复用
const resetForm = () => {
  Object.assign(userForm, {
    id: "",
    name: "",
    email: "",
    telephone: "",
    address: "",
  });
};

const addNewUser = async () => {
  // 这里写你的表单提交逻辑（比如接口请求）...
  
  // 提交完成后重置表单
  resetForm();
};
</script>

方案二：配合原生reset同步响应式数据（不推荐）

如果一定要用原生表单的reset()，需要先备份初始响应式数据，调用reset()后同步更新userForm，但这种方式相对繁琐：

<script setup>
import { ref, reactive, onMounted } from "vue";

const newUserForm = ref();

const userForm = reactive({
  id: "",
  name: "",
  email: "",
  telephone: "",
  address: "",
});

// 备份页面加载时的初始表单数据
let initialFormData;

onMounted(() => {
  initialFormData = JSON.parse(JSON.stringify(userForm));
});

const addNewUser = async () => {
  // 提交逻辑...
  
  // 调用原生reset恢复表单初始值
  newUserForm.value.reset();
  // 同步更新响应式数据
  Object.assign(userForm, initialFormData);
};
</script>

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