@@ -109,73 +109,83 @@ If you want the slim down version, here is the changes:
109109</template >
110110
111111<script >
112- import VueFormGenerator from " vue-form-generator"
112+ import Vue from ' vue'
113+ import VueFormGenerator from ' vue-form-generator'
114+ import ' vue-form-generator/dist/vfg.css'
113115
114- Vue .use (VueFormGenerator);
116+ Vue .use (VueFormGenerator)
115117
116118export default {
117- data: {
118-
119- model: {
120- id: 1 ,
121- name: " John Doe"
122- password: " J0hnD03!x4"
123- skills: [" Javascript" " VueJS"
124- email: " john.doe@gmail.com"
125- status: true
126- },
127-
128- schema: {
129- fields: [{
130- type: " input"
131- inputType: " text"
132- label: " ID (disabled text field)"
133- model: " id"
134- readonly: true ,
135- disabled: true
136- },{
137- type: " input"
138- inputType: " text"
139- label: " Name"
140- model: " name"
141- placeholder: " Your name"
142- featured: true ,
143- required: true
144- },{
145- type: " input"
146- inputType: " password"
147- label: " Password"
148- model: " password"
149- min: 6 ,
150- required: true ,
151- hint: " Minimum 6 characters"
152- validator: VueFormGenerator .validators .string
153- },{
154- type: " select"
155- label: " Skills"
156- model: " skills"
157- values: [" Javascript" " VueJS" " CSS3" " HTML5"
158- },{
159- type: " input"
160- inputType: " email"
161- label: " E-mail"
162- model: " email"
163- placeholder: " User's e-mail address"
164- },{
165- type: " checkbox"
166- label: " Status"
167- model: " status"
168- default: true
169- }]
170- },
171-
172- formOptions: {
173- validateAfterLoad: true ,
174- validateAfterChanged: true
119+ data () {
120+ return {
121+ model: {
122+ id: 1 ,
123+ name: ' John Doe'
124+ password: ' J0hnD03!x4'
125+ skills: [' Javascript' ' VueJS'
126+ email: ' john.doe@gmail.com'
127+ status: true
128+ },
129+ schema: {
130+ fields: [
131+ {
132+ type: ' input'
133+ inputType: ' text'
134+ label: ' ID (disabled text field)'
135+ model: ' id'
136+ readonly: true ,
137+ disabled: true
138+ },
139+ {
140+ type: ' input'
141+ inputType: ' text'
142+ label: ' Name'
143+ model: ' name'
144+ placeholder: ' Your name'
145+ featured: true ,
146+ required: true
147+ },
148+ {
149+ type: ' input'
150+ inputType: ' password'
151+ label: ' Password'
152+ model: ' password'
153+ min: 6 ,
154+ required: true ,
155+ hint: ' Minimum 6 characters'
156+ validator: VueFormGenerator .validators .string
157+ },
158+ {
159+ type: ' select'
160+ label: ' Skills'
161+ model: ' skills'
162+ values: [' Javascript' ' VueJS' ' CSS3' ' HTML5'
163+ },
164+ {
165+ type: ' input'
166+ inputType: ' email'
167+ label: ' E-mail'
168+ model: ' email'
169+ placeholder: ' User\' s e-mail address'
170+ },
171+ {
172+ type: ' checkbox'
173+ label: ' Status'
174+ model: ' status'
175+ default: true
176+ }
177+ ]
178+ },
179+ formOptions: {
180+ validateAfterLoad: true ,
181+ validateAfterChanged: true ,
182+ validateAsync: true
183+ }
175184 }
176185 }
177186}
178187</script >
188+ 179189```
180190
181191Usage in local components
0 commit comments