将现有表单html加载到vue组件中，并使用fetch提交表单

Question

我想将现有表单加载到vue组件中，并将表单数据发送回表单。cms没有"；"无头"；formsApi和我不想将给定的表单元素转换为自己的对象。

所以这个想法是：

• 加载现有表单html并在组件中呈现它
• 阻止默认表单提交并通过将表单数据发送回表单url进行处理

设置：

setup: (props) => {
const formElement = ref<HTMLFormElement>(null);
const formConfiguration = ref(null);
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
console.log(formData); // this delivers an empty object FormData {}
}
// load the form from existing page and assign to formElement
const loadForm = async() => await fetch(props.formUrl)
.then(response => response.text())
.then((response) => {
const parser = new DOMParser();
const formHtml = parser.parseFromString(response, 'text/html');
const theForm = formHtml.querySelector('form');
if (theForm instanceof HTMLFormElement) {
formConfiguration.value = {
enctype: theForm.enctype,
method: theForm.method,
id: theForm.id,
action: theForm.action
};
formElement.value = theForm.innerHTML;
}
})
onBeforeMount(loadForm);
return {
formElement,
loadForm,
handleSubmit,
formConfiguration
}
}

模板：

<template>
<div v-if="formElement && formConfiguration">
<form v-html="formElement"
:action="formConfiguration.action"
@submit="handleSubmit"
:method="formConfiguration.method"
enctype="multipart/form-data"
></form>
</div>
</template>

提交时，formData在中输出一个空对象

const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
console.log(formData); // this delivers an empty object FormData {}
}

所以我想，由form.innerHTML放置的表单字段对我的Vue组件来说是未知的吗？

我不喜欢用v-html传递html表单的方式，但如果不准备表单html并创建自己的表单字段(这将是巨大的(，我目前没有其他想法。

有人有更好的解决方案来加载和发送现有表单吗？

Answer 1

我自己犯的愚蠢错误：

console.log(formData)

不输出任何数据。

const formData = new FormData(e.target);
for (var key of formData.entries()) {
console.log(key[0] + ', ' + key[1])
}

Answer 2

记录FormData实例中所有条目的一种简单方法是将其扩展到console.log():中

const formData = new FormData()
formData.set('a', true)
formData.set('b', false)
formData.set('c', new Date())
// 👇
console.log(...formData)