Nuxt3中Formkit表单提交时插槽内未修改预填字段缺失问题

你可以通过以下几种方法解决提交时仅返回修改字段的问题：

方法1：设置submit-behavior="all" #

Formkit表单默认的submitBehavior是"modified"，仅返回被修改过的字段。将其设置为"all"后，提交事件的参数会包含所有字段（包括未修改的预填值）。

示例代码：

<template>
  <FormKit 
    type="form" 
    :init-fields="initData" 
    submit-behavior="all" 
    @submit="submitResource"
  >
    <FormKit name="legalName" label="法定名称" />
    <FormKit name="tin" label="税号" />
    <FormKit type="submit" label="提交" />
  </FormKit>
</template>

<script setup>
const initData = {
  legalName: '预设公司名称',
  tin: '123456789'
}

const submitResource = (allFields) => {
  // allFields 现在包含legalName、tin等所有字段
  console.log(allFields)
  // 执行提交逻辑
}
</script>

方法2：调用Formkit实例的getValues()方法 #

给表单组件添加ref，通过实例方法getValues()直接获取所有字段的当前值，不受修改状态影响。

示例代码：

<template>
  <FormKit 
    type="form" 
    ref="formRef" 
    :init-fields="initData" 
    @submit="submitResource"
  >
    <FormKit name="legalName" label="法定名称" />
    <FormKit name="tin" label="税号" />
    <FormKit type="submit" label="提交" />
  </FormKit>
</template>

<script setup>
const formRef = ref(null)
const initData = {
  legalName: '预设公司名称',
  tin: '123456789'
}

const submitResource = () => {
  const allFields = formRef.value.getValues()
  // allFields 包含所有字段值
  console.log(allFields)
  // 执行提交逻辑
}
</script>

方法3：手动合并初始值与提交数据 #

如果上述两种方法不适用，可以在提交时将预填的初始值与返回的修改字段合并，得到完整的字段集合。

示例代码：

<script setup>
const initData = {
  legalName: '预设公司名称',
  tin: '123456789'
}

const submitResource = (modifiedFields) => {
  const allFields = { ...initData, ...modifiedFields }
  // allFields 包含所有字段（修改的覆盖初始值）
  console.log(allFields)
  // 执行提交逻辑
}
</script>

推荐优先使用方法1，这是Formkit官方提供的配置项，最简洁且符合组件设计逻辑；方法2适合需要在提交前对字段值做额外处理的场景；方法3作为兜底方案使用。

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