Building forms with Vue composition API.
The API is not stable and might change in the future.
Visit https://beizhedenglong.github.io/vue-hooks-form/.
yarn add vue-hooks-form
<template>
<form @submit="onSubmit">
<label>Username</label>
<input v-model="username.value" :ref="username.ref" />
<p v-if="username.error">{{ username.error.message }}</p>
<label>Password</label>
<input v-model="password.value" :ref="password.ref" type="password" />
<p v-if="password.error">{{ password.error.message }}</p>
<button type="submit">submit</button>
</form>
</template>
<script>
import { useForm } from 'vue-hooks-form'
export default {
setup() {
const { useField, handleSubmit } = useForm({
defaultValues: {},
})
const username = useField('username', {
rule: { required: true },
})
const password = useField('password', {
rule: {
required: true,
min: 6,
max: 10,
},
})
const onSubmit = (data) => console.log(data)
return {
username,
password,
onSubmit: handleSubmit(onSubmit),
}
},
}
</script>
useForm
const {
values,
getFieldValues,
errors,
validateFields,
validateField,
get,
set,
useField,
handleSubmit
} = useForm({
defaultValues: {},
shouldUnregister: true,
validateMode: 'change',
})
useField
const {
ref,
value,
error,
validate
} = useField(path, options)
This project was inspired by react-hook-form, formik, and many other form libraries.
Author: beizhedenglong
Demo: https://beizhedenglong.github.io/vue-hooks-form/
Source Code: https://github.com/beizhedenglong/vue-hooks-form
#vue #vuejs #javascript