N

Nuxt•9mo ago•

15 replies

partap

Form fields reset on submit, and a some other strange behavior

Hi all!
I've used Vue for several years, but I've been working on learning some new libraries to add to my toolbox (Nuxt, NuxtUI, Pinia Colada)...
I noticed some strange behavior when using the NuxtUI Form component with Pinia Colada and I created a simple Todo app to replicate the issues I'm seeing. I'm hoping somebody here can help me out.

https://github.com/partap/nuxtui-forms-test

1. When I submit from a NuxtUI

Form

Form

component, the form content is reset to the initial state. All edits are discarded, and the form inputs do not match the source model. This appears to happen after the Submit handler finishes. This means that in the normal flow, between submitting the updates to the server and receiving the updated state from the server response, the changed fields briefly flash to the pre-edited values. If I don't actually post the changes in the submit handler, the form fields just revert and you can see the mismatch from the component data state vs the form field values.
2. The form's

dirty

dirty

prop seems to be

false

false

, always. Not sure if this is a bug, or if I need to handle it somehow, but the

dirtyFields

dirtyFields

prop is updated automatically, so that's weird.
3. I can't get the

Checkbox

Checkbox

component to work inside a form (same with

Switch

Switch

). If I click it, I can see that it updates the boolean v-model value to true, but the UI never updates to show checked. I can use a

Switch

Switch

or

Checkbox

Checkbox

to set values outside of the form state with no issues, so I assume it's either the

Form

Form

component or something about the Pinia Colada state that's causing the problem.

It seems that the Form component does a lot of fancy stuff behind the scenes to support validation and error reporting, so maybe I'm just using it wrong, but it seems pretty straightforward to use with a zod schema. I was using zod anyhow, so getting form validation for free would be pretty awesome.

GitHub

GitHub - partap/nuxtui-forms-test: Simple project for testing NuxtU...

Simple project for testing NuxtUI Forms behavior. Contribute to partap/nuxtui-forms-test development by creating an account on GitHub.