Vue-finalform NPM

vue-finalform

Introduction

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

Install

yarn add final-form vue-finalform

Usage

This library exports two components:

import { FinalForm, FinalField } from 'vue-finalform'

The first component you'll need is the FinalForm component:

<FinalForm :submit="submit">
  <!-- ignore the children for now -->
</FinalForm>

The only required prop is submit, it defines how to submit the form data, maybe simply log the form state:

function submit(state) {
  console.log(state)
}

The rendered output is:

<div></div>

As you can see it does nothing for now, you need to feed it a <form>:

<FinalForm :submit="submit">
  <form slot-scope="props" @submit="props.handleSubmit">
    <!-- ignore the children for now -->
  </form>
</FinalForm>

Now it renders:

<div><form></form></div>

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 <FinalField> component:

<FinalForm :submit="submit">
  <form slot-scope="props" @submit="props.handleSubmit">
    <FinalField 
      name="username" 
      :validate="v => v ? null : 'this is required'">
      <div slot-scope="props">
        <input v-on="props.events" :name="props.name">
        <span v-if="props.meta.error && props.meta.touched">
          {{ props.meta.error }}
        </span>
      </div>
    </FinalField>
  </form>
</FinalForm>

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.