vue-hooks-formhandleSubmit
This function will receive the form data if form validation is successful.
Type
ts
type HandleSubmitFn = (
(data: Object, e?: Event) => void,
(errors: Object, e?: Event) => void
) => Functiontype HandleSubmitFn = (
(data: Object, e?: Event) => void,
(errors: Object, e?: Event) => void
) => FunctionProps
SubmitHandler
A successful callback
ts
type SubmitHandler = (data: Object, e?: Event) => voidtype SubmitHandler = (data: Object, e?: Event) => voidSubmitErrorHandler
An error callback.
ts
type SubmitErrorHandler = (errors: Object, e?: Event) => voidtype SubmitErrorHandler = (errors: Object, e?: Event) => voidUsage
vue
<script setup>
import { createErrorHandler, createSubmitHandler, useForm } from '@vue-hooks-form/core'
const {
register,
handleSubmit,
} = useForm({
mode: 'onChange'
})
const onSubmit = createSubmitHandler((data) => {
console.log(data)
})
const onError = createErrorHandler((errors) => {
console.log(errors)
})
</script>
<template>
<form @submit.prevent="handleSubmit(onSubmit, onError)()">
name: <input :="register('name', { required: true })">
<button type="submit">
submit
</button>
</form>
</template><script setup>
import { createErrorHandler, createSubmitHandler, useForm } from '@vue-hooks-form/core'
const {
register,
handleSubmit,
} = useForm({
mode: 'onChange'
})
const onSubmit = createSubmitHandler((data) => {
console.log(data)
})
const onError = createErrorHandler((errors) => {
console.log(errors)
})
</script>
<template>
<form @submit.prevent="handleSubmit(onSubmit, onError)()">
name: <input :="register('name', { required: true })">
<button type="submit">
submit
</button>
</form>
</template>Detail
You can easily submit form asynchronously with handleSubmit.
ts
handleSubmit(async data => await fetchAPI(data))()handleSubmit(async data => await fetchAPI(data))()