Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-final-form
🏁 High performance subscription-based form state management for Vue.js.
https://github.com/egoist/vue-final-form
Last synced: 13 days ago
JSON representation
🏁 High performance subscription-based form state management for Vue.js.
- Host: GitHub
- URL: https://github.com/egoist/vue-final-form
- Owner: egoist
- License: mit
- Created: 2017-12-19T16:11:07.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-11-16T23:26:12.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T10:28:34.445Z (about 1 month ago)
- Language: Vue
- Homepage: https://egoist.github.io/vue-final-form
- Size: 437 KB
- Stars: 260
- Watchers: 6
- Forks: 12
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - egoist/vue-final-form - 🏁 High performance subscription-based form state management for Vue.js. (others)
README
# vue-final-form
[](https://npmjs.com/package/vue-final-form) [](https://npmjs.com/package/vue-final-form) [](https://circleci.com/gh/egoist/vue-final-form/tree/master) [](https://github.com/egoist/donate) [](https://chat.egoist.moe)
## Introduction
🏁 High performance subscription-based form state management for Vue.js.
## Install
```bash
yarn add final-form vue-final-form
```
## Usage
[](https://codesandbox.io/s/github/egoist/vue-final-form/tree/master/example)
This library exports two components:
```js
import { FinalForm, FinalField } from "vue-final-form";
```
The first component you'll need is the `FinalForm` component:
```vue
```
The only required prop is `submit`, it defines how to submit the form data, maybe simply log it:
```js
function submit(values) {
console.log(values);
}
```
The rendered output is:
```html
```
As you can see it does nothing for now, you need to feed it a ``:
```vue
```
Now it renders:
```html
```
Here it uses the [`scoped slots`](https://vuejs.org/v2/guide/components.html#Scoped-Slots) feature from Vue.js (>=2.1.0), `props.handleSubmit` is the actual method it will run to submit data.
Next let's define a form field with `` component:
```vue
{{ props.meta.error }}
```
Things got a bit more complex, but it's easy if you try to understand:
The only prop that is required by `FinalField` is `name`, it tells the field where to store the field data in the form state, here we stores it as `state.username`.
The `validate` prop is used to validate the field data, it could be a function that returns an error message or `null`, `undefined` when it's considered valid.
The data that `FinalField` passed to its children contains `props.events` which is required to be bound with the `input` element in order to properly track events. And `props.name` is the `name` you gave `FinalField`, `props.meta` is some infomation about this field.
## API
### ``
#### Props
##### submit
Type: `function`
Default: `() => {}`
Here we allow `submit` to be optional since you may not need it when you just use `vue-final-form` as a form validation tool.
See [onSubmit](https://github.com/final-form/final-form#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void).
##### validate
Type: `function` `Array`
A whole-record validation function that takes all the values of the form and returns any validation errors.
See [validate](https://github.com/final-form/final-form#validate-values-object--object--promiseobject).
##### initialValues
Type: `object`
See [initialValues](https://github.com/final-form/final-form#initialvalues-object).
##### subscription
Type: `FormSubscription`
Default: All
See [FormSubscription](https://github.com/final-form/final-form#formsubscription--string-boolean-).
#### Events
##### change
Params:
- `formState`: https://github.com/final-form/final-form#formstate
#### Scoped slot props
It basically exposes everything in [FormState](https://github.com/final-form/final-form#formstate) plus follwoings:
##### handleSubmit
Type: `function`
The function that you will invoke to submit the form data, you may use it as the `:submit` event handler on your ``.
##### reset
Type: `function`
See [FormApi.reset](https://github.com/final-form/final-form#reset---void).
##### mutators
Type: `?{ [string]: Function }`
See [FormApi.mutators](https://github.com/final-form/final-form#mutators--string-function-).
##### batch
Type: `function`
See [FormApi.batch](https://github.com/final-form/final-form#batch-fn---void--void).
##### blur
Type: `function`
See [FormApi.blur](https://github.com/final-form/final-form#blur-name-string--void).
##### change
Type: `function`
See [FormApi.change](https://github.com/final-form/final-form#change-name-string-value-any--void).
##### focus
Type: `function`
See [FormApi.focus](https://github.com/final-form/final-form#focus-name-string--void)
##### initialize
Type: `function`
See [FormApi.initialize](https://github.com/final-form/final-form#initialize-values-object--void).
### ``
#### Props
##### name
Type: `string`
Required: `true`
The name of this field.
See [name](https://github.com/final-form/final-form#name-string-1).
##### validate
Type: `function` `Array`
A field-level validation function to validate a single field value. Returns an error if the value is not valid, or undefined if the value is valid.
See [validate](https://github.com/final-form/final-form#validate-value-any-allvalues-object--any).
##### subscription
Type: `FieldSubscription`
Default: All
See [FieldSubcription](https://github.com/final-form/final-form#fieldsubscription--string-boolean-).
#### Events
##### change
Params:
- `fieldState`: https://github.com/final-form/final-form#fieldstate
#### Scoped slot props
It basically exposes [FieldState](https://github.com/final-form/final-form#fieldstate).
##### name
Type: `string`
The name of this field.
See [`FieldState.name`](https://github.com/final-form/final-form#name-string)
##### change
Type: `function`
See [`FieldState.change`](https://github.com/final-form/final-form#change-value-any--void)
##### value
Type: `any`.
The current value of this field. You should probably bind it to `:value` of `input` or `textarea` if you have set initial value for the field.
##### events
Type: `{ input: Function, focus: Function, blur: Function }`
Bind these event handlers to your `input` `textarea` element.
See [FieldState.change](https://github.com/final-form/final-form#change-value-any--void), [FieldState.focus](https://github.com/final-form/final-form#focus---void), [FieldState.blur](https://github.com/final-form/final-form#blur---void).
##### meta
Type: `object`
Everything in [FieldState](https://github.com/final-form/final-form#fieldstate) except for `blur` `change` `focus` `name`
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**vue-final-form** © [EGOIST](https://github.com/egoist), Released under the [MIT](https://github.com/egoist/vue-final-form/blob/master/LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-final-form/contributors)).
> [egoist.moe](https://egoist.moe) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)