@@ -15,99 +15,101 @@ This is a simple usage example:
15
15
` ` `
16
16
17
17
` ` ` js
18
- import VueFormGenerator from " vue-form-generator" ;
18
+ import Vue from ' vue'
19
+ import VueFormGenerator from ' vue-form-generator'
20
+ import ' vue-form-generator/dist/vfg.css'
19
21
20
- Vue .use (VueFormGenerator);
22
+ Vue .use (VueFormGenerator)
21
23
22
- /* optional custom validators treated as " built-in"
24
+ /* optional custom validators treated as ' built-in'
23
25
Vue.use(VueFormGenerator, {
24
- validators: objectWithCustomValidatorFunctions
26
+ validators: objectWithCustomValidatorFunctions
25
27
});
26
28
*/
27
29
28
30
export default {
29
31
data () {
30
32
return {
31
-
33
+
32
34
model: {
33
35
id: 1 ,
34
- name: " John Doe" ,
35
- password: " J0hnD03!x4" ,
36
- skills: [" Javascript" , " VueJS" ],
37
-
36
+ name: ' John Doe' ,
37
+ password: ' J0hnD03!x4' ,
38
+ skills: [' Javascript' , ' VueJS' ],
39
+
38
40
status: true
39
41
},
40
-
42
+
41
43
schema: {
42
44
groups: [
43
45
{
44
- legend: " User Details" ,
46
+ legend: ' User Details' ,
45
47
fields: [
46
48
{
47
- type: " input" ,
48
- inputType: " text" ,
49
- label: " ID (disabled text field)" ,
50
- model: " id " ,
49
+ type: ' input' ,
50
+ inputType: ' text' ,
51
+ label: ' ID (disabled text field)' ,
52
+ model: ' id ' ,
51
53
readonly: true ,
52
54
disabled: true
53
55
},
54
56
{
55
- type: " input" ,
56
- inputType: " text" ,
57
- label: " Name" ,
58
- model: " name" ,
59
- id: " user_name" ,
60
- placeholder: " Your name" ,
57
+ type: ' input' ,
58
+ inputType: ' text' ,
59
+ label: ' Name' ,
60
+ model: ' name' ,
61
+ id: ' user_name' ,
62
+ placeholder: ' Your name' ,
61
63
featured: true ,
62
64
required: true
63
65
},
64
66
{
65
- type: " input" ,
66
- inputType: " email" ,
67
- label: " E-mail" ,
68
- model: " email" ,
69
- placeholder: " User's e-mail address"
67
+ type: ' input' ,
68
+ inputType: ' email' ,
69
+ label: ' E-mail' ,
70
+ model: ' email' ,
71
+ placeholder: ' User\ ' s e-mail address'
70
72
},
71
73
{
72
- type: " input" ,
73
- inputType: " password" ,
74
- label: " Password" ,
75
- model: " password" ,
74
+ type: ' input' ,
75
+ inputType: ' password' ,
76
+ label: ' Password' ,
77
+ model: ' password' ,
76
78
min: 6 ,
77
79
required: true ,
78
- hint: " Minimum 6 characters" ,
79
- validator: validators . string
80
+ hint: ' Minimum 6 characters' ,
81
+ validator: ' string'
80
82
}
81
83
]
82
84
},
83
85
{
84
- legend: " Skills & Status" ,
86
+ legend: ' Skills & Status' ,
85
87
fields: [
86
88
{
87
- type: " select" ,
88
- label: " skills" ,
89
- model: " type" ,
90
- values: [" Javascript" , " VueJS" , " CSS3" , " HTML5" ]
89
+ type: ' select' ,
90
+ label: ' skills' ,
91
+ model: ' type' ,
92
+ values: [' Javascript' , ' VueJS' , ' CSS3' , ' HTML5' ]
91
93
},
92
94
{
93
- type: " checkbox" ,
94
- label: " Status" ,
95
- model: " status" ,
95
+ type: ' checkbox' ,
96
+ label: ' Status' ,
97
+ model: ' status' ,
96
98
default: true
97
99
}
98
100
]
99
101
}
100
- ],
101
-
102
- formOptions: {
103
- validateAfterLoad: true ,
104
- validateAfterChanged: true ,
105
- fieldIdPrefix: ' user-'
106
- }
107
- }
102
+ ]
103
+ },
104
+
105
+ formOptions: {
106
+ validateAfterLoad: true ,
107
+ validateAfterChanged: true ,
108
+ fieldIdPrefix: ' user-'
108
109
}
109
110
}
110
111
}
112
+ }
111
113
` ` `
112
114
` ` ` html
113
115
</script >
0 commit comments