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: /

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.

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.

• vue.js
• vuejs3
• vue-component
• vue-composition-api
• primevue

1 Answer 1

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()">
  ...