Missing fields in Formkit's Submit Handler when children are in placed inside slot

Question

Formkit

I am using Nuxt 3 with a Formkit of type=form in a component; with its child fields inside a component as so :

// ResourceForm.vue

<FormKit
id="sheetForm"
:key="initFields"
type="form"
:value="initFields"
:actions="false"
:disabled="isFormDisabled"
messages-class="center-messages"
@keydown.enter.prevent="() => null"
@submit="submitResource"
>
 <slot />
</FormKit>

This form is prepopulated with a value "initFields"

// BusinessUnit.vue

<template>
  <div class="w-96">
    <FormKit
      v-model="fields.legalName"
      type="text"
      name="legalName"
      data-test-id="legal-name"
      label="Legal Name"
      validation="required"
    />
    <div class="mb-3" />
    <FormKit
      v-model="fields.tin"
      type="text"
      name="TIN"
      label="Tax Identification Number"
      data-test-id="tin"
      validation="required"
    />
    <div class="mb-3" />
  </div>
</template>

when I submit using @submit with a submitHandler; I do not find the prepopulated fields that I put in my slot when getting from the parameters.

// ResourceForm.vue

const submitResource = async (fieldData: any) => {
    console.log(fieldData) // there is no legalName nor tin
}

however, when I modify a field inside the child; that field appears in the submitHandler params. by only "touching" the field it becomes part of the submission data.

How do I extract all the fields, regardless if it was modified or not ?

Answer 1

You're using v-model="fields.legalName" and v-model="fields.tin" those are overwritting the base one that goes from the parent, I recommend not using v-model when working with FormKit, FormKit already does work with values for you on all nested levels without the need of it.