vue-controlled-form-fields v0.1.6

vue-controlled-form-fields is a flexible and hight-performance state-managament tool for creating different level of forms.

• <Form />
  • Documents
  • Examples
• <Field />
  • Documents
  • Examples
• <FieldArray />
  • Documents
  • Examples
• FieldStateMixin
  • Documents
  • Examples

<c-form :submit="onSubmit">
   <div slot-scope="{pristine, invalid}">
    <h2>Simple Default Input</h2>
    <div>
      <label>First Name</label>
      <field name="firstName" component="input" placeholder="First Name"/>
    </div>

    <h2>A Reusable Input Component</h2>
    <div>
      <label>Interests</label>
      <field name="interests">
        <InterestPicker/>
      </field>
    </div>

    <h2>Using slot-scope</h2>
    <field name="bio" :validate="[required]">
      <div slot-scope="{ input, events, meta }">
        <div>
          <label>Bio</label>
          <textarea v-bind="input" v-on="events" />
          <span v-if="meta.touched && meta.error">{{ meta.error }}</span>
        </div>
      </div>
    </field>

    <button type="submit" :disabled="pristine || invalid">Submit</button>
  </div>
</c-form>