Vue的表单状态管理– vue-form

Vue的表单状态管理– vue-form

插件名称:vue-form

发布时间:2020年6月28日

插件作者:detools

官网 演示 GitHub下载

只是Vue.js的另一个表单状态管理库。

安装和下载:

# NPM
$ npm install @detools/vue-form --save

使用:

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>
    )
  },
}
相关插件