PrimeVue - How to use reset emit to clear form?

Question

I've been experimenting with PrimeVue and am trying to understand how to use their forms. They don't have any example of clearing the form fields. However, there is mention of a "reset" event in the docs under the API for the Forms component: https://primevue.org/forms/

It states these are "custom events used by the component's emit." I'm rusty on how emits work. If I wanted to add a simple "Reset" button next to the Submit button that would use this, how would I do that? (Using Vue3 composition API).

Would like a short example, perhaps modified from one their doc examples.

Estus Flask · Accepted Answer · 2025-02-05 10:42:10Z

0

The mentioned part of the documentation describes event object that is available in submit handler, where reset stands for event.reset() method and not an event.

Form exposes form instance through slot props, which isn't properly documented. The documentation states that $form contains form field properties, but this information is outdated.

With the latest version it's supposed to be something like:

<Form v-slot="$form">
  ...
  <button type="button" @click="$form.reset()">
  ...

Or considering there's form template ref:

<Form ref="form">
  ...
  <button type="button" @click="form.reset()">
  ...

edited Feb 5 at 10:42

answered Feb 5 at 0:18

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jreeves Feb 5 at 2:40

Trying it with ref="form" and form.reset() gives a console error indicating that form is undefined. Using $form with v-slot doesn't give an error, but it doesn't clear the form either. I've specified :initialValues in the Form and added a ref by that name initialValues. I see now the examples have that as a reactive instead of a ref. Tried changing to reactive, but no difference. I also tried adding individual initialValue values to each FormField, but no change.

Estus Flask Feb 5 at 12:14

The second snippet assumes that you defined "form" template ref in script section vuejs.org/guide/essentials/template-refs . There's a problem with form reactivity. This is a bug that needs to be reported stackblitz.com/edit/u9znrf-ivrsnctn . Primevue forms are very new and certainly have a bunch. This would apply to any reset() use, including the one that was documented in "submit" handler, as well as setting form.states manually

Collectives™ on Stack Overflow

PrimeVue - How to use reset emit to clear form?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related