How do I implement a Reset button in PrimeVue forms using the Vue 3 Composition API?

Below is a short example using Vue 3’s Composition API with

VUECopied
<script setup lang="ts">
import { ref } from 'vue'

// Define our emitted events for submit and reset.
const emit = defineEmits({
  submit: (payload: { email: string; password: string }) => {
    // Optionally, add validation logic for submit payload here.
    return !!payload.email && !!payload.password
  },
  // No extra validation for reset.
  reset: null
})

// Form field data.
const email = ref('')
const password = ref('')

// Handle form submit
function handleSubmit() {
  // Emitting the submit event with the payload.
  if (!emit('submit', { email: email.value, password: password.value })) {
    console.warn('Submit payload failed validation!')
  }
}

// Handle form reset.
function handleReset() {
  // Reset local form fields.
  email.value = ''
  password.value = ''
  // Emit the reset event.
  emit('reset')
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="email">Email:</label>
      <input id="email" v-model="email" type="email" />
    </div>
    <div>
      <label for="password">Password:</label>
      <input id="password" v-model="password" type="password" />
    </div>
    <div>
      <button type="submit">Submit</button>
      <!-- Use type="button" to prevent this button from submitting the form -->
      <button type="button" @click="handleReset">Reset</button>
    </div>
  </form>
</template>

Explanation

• Event Declaration:
  We declare the submit and reset events using the defineEmits() macro. For submit, we add an inline validator that checks whether both email and password are provided. The reset event is declared with no validation.

• Event Emission:
  In the handleSubmit method, we emit the submit event with the form payload. In the handleReset method, we clear the local form fields and then emit the reset event. This event can be caught by a parent component to perform any additional actions.

• Button Types:
  Notice that the reset button is type="button" so it doesn't trigger a form submission when clicked.

This setup should integrate smoothly with PrimeVue’s form components if you need to extend or integrate PrimeVue’s Behavior further.