Usage

VueJS Generators
GitHub NPM JSFiddle CodePen
Search…
1.0.0
Usage
This is a simple usage example:
1
<template>
2
  <div class="panel-body">
3
    <form>
4
      <vue-form-generator :schema="schema" :model="model" :options="formOptions">
5
      </vue-form-generator>
6
    </form>
7
  </div>
8
</template>
9
<script>
Copied!
1
import Vue from 'vue'
2
import VueFormGenerator from 'vue-form-generator'
3
import 'vue-form-generator/dist/vfg.css'
4
​
5
Vue.use(VueFormGenerator)
6
​
7
/* optional custom validators treated as 'built-in'
8
Vue.use(VueFormGenerator, {
9
  validators: objectWithCustomValidatorFunctions
10
});
11
*/
12
​
13
export default {
14
  data () {
15
    return {
16
​
17
      model: {
18
        id: 1,
19
        name: 'John Doe',
20
        password: 'J0hnD03!x4',
21
        skills: ['Javascript', 'VueJS'],
22
        email: '[email protected]',
23
        status: true
24
      },
25
​
26
      schema: {
27
        groups: [
28
          {
29
            legend: 'User Details',
30
            fields: [
31
              {
32
                type: 'input',
33
                inputType: 'text',
34
                label: 'ID (disabled text field)',
35
                model: 'id',
36
                readonly: true,
37
                disabled: true
38
              },
39
              {
40
                type: 'input',
41
                inputType: 'text',
42
                label: 'Name',
43
                model: 'name',
44
                id: 'user_name',
45
                placeholder: 'Your name',
46
                featured: true,
47
                required: true
48
              },
49
              {
50
                type: 'input',
51
                inputType: 'email',
52
                label: 'E-mail',
53
                model: 'email',
54
                placeholder: 'User\'s e-mail address'
55
              },
56
              {
57
                type: 'input',
58
                inputType: 'password',
59
                label: 'Password',
60
                model: 'password',
61
                min: 6,
62
                required: true,
63
                hint: 'Minimum 6 characters',
64
                validator: 'string'
65
              }
66
            ]
67
          },
68
          {
69
            legend: 'Skills & Status',
70
            fields: [
71
              {
72
                type: 'select',
73
                label: 'Skills',
74
                model: 'skills',
75
                values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
76
              },
77
              {
78
                type: 'checkbox',
79
                label: 'Status',
80
                model: 'status',
81
                default: true
82
              }
83
            ]
84
          }
85
        ]
86
      },
87
​
88
      formOptions: {
89
        validateAfterLoad: true,
90
        validateAfterChanged: true,
91
        validateAsync: true
92
      }
93
    }
94
  }
95
}
Copied!
1
</script>
Copied!
Installation
Styling
Last modified 3yr ago
Copy link