vue-final-form

    

Introduction

🏁 High performance subscription-based form state management for Vue.js.

Install

``bash
yarn add final-form vue-final-form
`

Usage

![Edit example](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

Now it renders:

`html


Here it uses the 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



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

$3

#### 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.

##### validate

Type: function Array

A whole-record validation function that takes all the values of the form and returns any validation errors.

See validate.

##### initialValues

Type: object

See initialValues.

##### subscription

Type: FormSubscription

Default: All

See FormSubscription.

#### Events

##### change

Params:

- formState: https://github.com/final-form/final-form#formstate

#### Scoped slot props

It basically exposes everything in 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