vue FormData.entries 未由提交提供

Question

我有一个带有

form

的小 Vue 应用程序，并且只有一个

<input name"surname">

和

<button type="submit">

。
使用案例：输入“myname”并提交。

初始化

new FormData()

上传的表单没有条目。

// template.html

<form @submit.prevent="handleFormSubmit">
  <input type="text" name="surname" />
  <button type="submit">Save</button>
</form>

// form.ts
...
import tpl from "./template.html"

export default defineComponent({
  template: tpl,
  ...
  methods: {
    handleFormSubmit(event:SubmitEvent)
    {
      console.log(event.target); // log: <form>...</form>
      console.log(event.target.querySelector('input').value); // log: myname
      const formData = new FormData(event.target);
      console.log([...formData.entries()]) // log: []
    }
  } 
})

为什么

new FormData(event.target)

无法捕获我输入的值？

Answer 1

好吧，解决办法就是用

Object.fromEntries(formData)

代替

formData.entries()