@detools/vue-form

vue-form

Form State Management for VueJS

Installation

npm i @detools/vue-form

Usage

import { mapActions } from 'vuex'
import Form, { Input } from '@detools/vue-form'

export default {
  data() {
    return {
      formValues: {},
    }
  },

  methods: {
    ...mapActions('cart', ['checkout']),

    handleSubmit(values) {
      return this.checkout(values)
    },
  },

  render() {
    return (
      <div>
        <h1>Basic Form</h1>
        <div class="wrapper">
          <div class="form">
            <Form cancel submit handleSubmit={this.handleSubmit} v-model={this.formValues}>
              <Input formItem label name="username" />
            </Form>
          </div>
          <div class="values">
            <strong>Form Values</strong>
            <br />
            <br />
            <div>{JSON.stringify(this.formValues, null, 2)}</div>
          </div>
        </div>
      </div>
    )
  },
}

More Examples

See source in example/src folder. See demo at https://detools-vue-form.netlify.com

Available Connected Components

• Checkbox
• CheckboxGroup
• DatePicker
• Input
• InputNumber
• Radio
• RadioGroup
• Select
• Slider
• Switch
• TimePicker
• Upload
• ArrayField
• Form

Changelog

• 5.13.8
• 5.13.7
• 5.13.6
• 5.13.5
• 5.13.4
• 5.13.3
• 5.13.2
• 5.13.1
• 5.13.0
• 5.12.3
• 5.12.2
• 5.12.1
• 5.12.0
• 5.11.2
• 5.11.1
• 5.11.0
• 5.10.8
• 5.10.7
• 5.10.6
• 5.10.5
• 5.10.4
• 5.10.3
• 5.10.2
• 5.10.1
• 5.10.0
• 5.9.0
• 5.8.0
• 5.7.1
• 5.7.0
• 5.6.7
• 5.6.6
• 5.6.5
• 5.6.4
• 5.6.3
• 5.6.2
• 5.6.1
• 5.6.0
• 5.5.1
• 5.5.0
• 5.4.7
• 5.4.6
• 5.4.5
• 5.4.4
• 5.4.3
• 5.4.2
• 5.4.1
• 5.4.0
• 5.3.2
• 5.3.1
• 5.3.0
• 5.2.3
• 5.2.1
• 5.2.0
• 5.1.0
• 5.0.4
• 5.0.3
• 5.0.2
• 5.0.1
• 5.0.0
• 4.x.x
• 3.x.x
• 2.x.x
• 1.x.x