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
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!
Last modified 3yr ago
Copy link