Inertia Vue2单页多表单：如何用Inertia Form提交每个表单

要实现多个表单独立提交，核心是让每个表单对应独立的Inertia Form实例，或者在提交时明确区分表单类型与目标数据，以下是两种可行方案：

方案一：为每个表单创建独立Form实例 #

这种方式更贴合Inertia Form的设计，能充分利用其内置的错误处理、状态管理特性。

1. 初始化Form实例 #

在组件脚本中，分别为主组织表单和每个联系人表单创建独立的Form实例：

<script setup>
import { useForm } from '@inertiajs/vue3'
import { ref } from 'vue'

// 主组织表单实例
const organizationForm = useForm({
  organization_name: ''
})

// 模拟后端返回的组织与联系人数据
const organization = ref({
  contacts: [{ id: 1, first_name: '' }, { id: 2, first_name: '' }]
})

// 为每个联系人生成对应的Form实例
const contactForms = ref(
  organization.value.contacts.map(contact => 
    useForm({ first_name: contact.first_name })
  )
)

// 提交组织表单
const updateOrganization = () => {
  organizationForm.post(route('organizations.update'), {
    onSuccess: () => {
      // 提交成功后的逻辑，比如重置表单、提示用户
    }
  })
}

// 提交单个联系人表单
const updateContact = (index) => {
  const contact = organization.value.contacts[index]
  contactForms.value[index].post(route('contacts.update', contact.id), {
    onSuccess: () => {
      // 单个联系人提交成功后的逻辑
    }
  })
}
</script>

2. 模板中绑定对应表单与提交方法 #

修改模板，让每个表单关联自己的Form实例和提交函数：

<template>
  <!-- 主组织表单 -->
  <form @submit.prevent="updateOrganization">
    <text-input 
      v-model="organizationForm.organization_name" 
      :error="organizationForm.errors.organization_name" 
      class="pb-8 pr-6 w-full lg:w-1/4" 
      label="Customer Name" 
    />
  </form>

  <!-- 动态生成的联系人表单 -->
  <form 
    v-for="(contact, index) in organization.contacts" 
    :key="contact.id" 
    @submit.prevent="() => updateContact(index)"
  >
    <text-input 
      v-model="contactForms[index].first_name" 
      :error="contactForms[index].errors.first_name" 
      class="pb-8 pr-6 w-full" 
      label="First name" 
    />
  </form>
</template>

方案二：复用提交方法，动态区分表单 #

如果不想维护多个Form实例，也可以在提交时传入表单类型、数据和路由参数，动态创建Form完成提交：

<script setup>
import { useForm } from '@inertiajs/vue3'
import { ref } from 'vue'

const organization = ref({
  organization_name: '',
  contacts: [{ id: 1, first_name: '' }, { id: 2, first_name: '' }]
})

// 通用提交方法
const update = (formType, submitData, resourceId) => {
  const form = useForm(submitData)
  // 根据表单类型选择对应路由
  const targetRoute = formType === 'organization' 
    ? route('organizations.update') 
    : route('contacts.update', resourceId)

  form.post(targetRoute, {
    onSuccess: () => {
      // 通用成功处理逻辑
    }
  })
}
</script>

<template>
  <form @submit.prevent="update('organization', { organization_name: organization.organization_name })">
    <text-input 
      v-model="organization.organization_name" 
      class="pb-8 pr-6 w-full lg:w-1/4" 
      label="Customer Name" 
    />
  </form>

  <form 
    v-for="contact in organization.contacts" 
    :key="contact.id" 
    @submit.prevent="update('contact', { first_name: contact.first_name }, contact.id)"
  >
    <text-input 
      v-model="contact.first_name" 
      class="pb-8 pr-6 w-full" 
      label="First name" 
    />
  </form>
</template>

注意事项 #

• 动态生成的表单务必绑定唯一的:key（比如用contact.id），避免Vue渲染异常
• 可以利用Inertia Form的processing状态，在提交时显示加载提示（比如v-if="form.processing"）
• 两种方案都能结合Inertia的错误处理，通过form.errors获取后端返回的校验错误

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