Skip to content

Forms not initializing well, causing issues with Popover inputs & need for v-model #7782

@bwhitt

Description

@bwhitt

Describe the bug

I'm having a couple issues with nested objects and combining them with a popover which presents a problem with initialized values. I have a situation where i want to condense the UI into a popover to handle settings on comment pins. Checkout stackblitz for simplified version.
https://stackblitz.com/edit/vitejs-vite-1rgoeapo?file=src%2FApp.vue

ToggleSwitch will preserve state if you add a v-model reference to the $form state. However v-model reference is undefined until component renders, which breaks that setup. Which leads to my two issues:

  1. ToggleSwitch not preserving state when using the form name mapping alone in the popover.

  2. $form slot is not initialized with initial values

Image

My current workaround, copy entries from the popover into a v-show="false" div so it is in the DOM or do this chained conditional v-if.

<ToggleSwitch v-if="$form?.pins?.length && $form?.pins[0]" v-model="$form.pins[0].isPinned.value" :name="pins[${currentPinIndex}].isPinned" />

This seems to be related to the following issues where were marked closed and I am able to handle the nested array of objects here. I see there are some examples in here that v-model to the initial values, which i would prefer not to do, because i like the name mapping and there are many components here. But, adding this as references.
#7371
#6924

Reproducer:
https://stackblitz.com/edit/vitejs-vite-1rgoeapo?file=src%2FApp.vue

Versions:
"@primevue/forms": "^4.3.5",
"primevue": "^4.3.5",
"vue": "^3.5.14",
"zod": "^3.25.49"

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/vitejs-vite-1rgoeapo?file=src%2FApp.vue

Environment

"@primevue/forms": "^4.3.5",
"primevue": "^4.3.5",
"vue": "^3.5.14",
"zod": "^3.25.49"

Vue version

3.5.14

PrimeVue version

4.3.5

Node version

23

Browser(s)

Chrome

Steps to reproduce the behavior

See bug description and stackblitz

Expected behavior

Not have to do messy workarounds with form state or doubling data changes in v-model initial values

Metadata

Metadata

Assignees

Labels

Status: Pending ReviewIssue or pull request is being reviewed by Core Team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions