I recently created a Vue-App that consists of a simple form with just one
<input name"surname"><button type="submit">The use case is to input "myname" and submit the form.
However, when I initialize new FormData() with the submitted form, it does not contain any entries.
// 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: []
}
}
})
I'm puzzled as to why new FormData(event.target) is unable to capture the value of my input field. Can anyone shed some light on this issue?