Vue项目中new FormData(event.target)无法捕获表单输入值的原因？

安全阿岳

2026-6-30

问题原因及解决方案

可能的原因：

事件目标指向错误：点击submit按钮触发表单提交时，event.target实际指向的是按钮元素而非表单元素（尽管你打印显示为form，可能是特殊场景下的视觉误差）。FormData必须传入表单元素才能正确收集数据。
TypeScript类型未断言：event.target的类型为EventTarget，而FormData构造函数要求传入HTMLFormElement类型的参数。未做类型断言可能导致编译后代码无法正确识别表单元素。
表单元素name属性丢失：如果Vue模板编译时未将name="surname"正确渲染到原生DOM的input元素上，FormData会忽略无name属性的表单控件。

解决方案：

使用event.currentTarget获取表单元素
event.currentTarget始终指向绑定事件的元素（即form标签），能确保传入FormData的是正确的表单实例：

handleFormSubmit(event: SubmitEvent) {
  const form = event.currentTarget as HTMLFormElement;
  const formData = new FormData(form);
  console.log([...formData.entries()]); // 输出: [["surname", "myname"]]
}

显式进行类型断言
如果坚持使用event.target，需要将其断言为HTMLFormElement，避免TypeScript类型检查导致的问题：

handleFormSubmit(event: SubmitEvent) {
  const form = event.target as HTMLFormElement;
  const formData = new FormData(form);
  console.log([...formData.entries()]);
}