如何在Vue.js中实现多表单字段的HTTP POST请求？

我在Vue.js里开发一个包含大量字段的表单，需要把所有字段通过HTTP POST请求提交到处理变更的API。我会用数据绑定来验证和处理部分表单字段，但最终希望一次性提交全部表单内容。

目前我摸索出的最优方法是直接获取提交事件对应的表单元素，具体代码如下：

模板代码 #

<form @submit.prevent="submit($event)">
<!-- 表单字段内容 -->
</form>

提交逻辑代码 #

async function submit(event) {
    // 这里可以先验证/预处理已做数据绑定的字段
    const data = new FormData(event.srcElement)
    const res = await fetch("saveChanges.php", {
        method: 'post',
        body: data,
    })
    const jsonResponse = await res.json()
    // 处理接口返回的响应数据
}

额外优化建议 #

• 如果已经用Vue响应式数据维护了部分字段，可以在提交前把这些数据合并到FormData里，避免数据不一致：

  // 假设响应式数据存在formState对象中
  Object.entries(formState).forEach(([key, value]) => {
    data.append(key, value)
  })
  

• 给表单加个ref，直接通过ref获取表单元素比从事件对象里拿更直观：

  <form ref="formRef" @submit.prevent="submit">
  <!-- 表单字段 -->
  </form>
  

  async function submit() {
    const data = new FormData(this.$refs.formRef)
    // 后续提交逻辑不变
  }
  

• 如果需要统一处理字段格式（比如日期格式化、数字转换），可以在创建FormData前遍历表单元素做预处理，或者用Vue自定义指令统一处理输入格式。

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