Skip to content

Commit 045f7a6

Browse files
committed
fixes issue with usage example
* converted to single-quotes (vue-cli default) * added `Vue` import * added `vfg.css` import * fixed spacing * fixed `formOptions` (was inside of `schema`) * added `validateAsync` to `formOptions`
1 parent 7fead1c commit 045f7a6

File tree

1 file changed

+50
-48
lines changed

1 file changed

+50
-48
lines changed

usage.md

+50-48
Original file line numberDiff line numberDiff line change
@@ -15,99 +15,101 @@ This is a simple usage example:
1515
```
1616
1717
```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'
1921
20-
Vue.use(VueFormGenerator);
22+
Vue.use(VueFormGenerator)
2123
22-
/* optional custom validators treated as "built-in"
24+
/* optional custom validators treated as 'built-in'
2325
Vue.use(VueFormGenerator, {
24-
validators: objectWithCustomValidatorFunctions
26+
validators: objectWithCustomValidatorFunctions
2527
});
2628
*/
2729
2830
export default {
2931
data () {
3032
return {
31-
33+
3234
model: {
3335
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+
3840
status: true
3941
},
40-
42+
4143
schema: {
4244
groups: [
4345
{
44-
legend: "User Details",
46+
legend: 'User Details',
4547
fields: [
4648
{
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',
5153
readonly: true,
5254
disabled: true
5355
},
5456
{
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',
6163
featured: true,
6264
required: true
6365
},
6466
{
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'
7072
},
7173
{
72-
type: "input",
73-
inputType: "password",
74-
label: "Password",
75-
model: "password",
74+
type: 'input',
75+
inputType: 'password',
76+
label: 'Password',
77+
model: 'password',
7678
min: 6,
7779
required: true,
78-
hint: "Minimum 6 characters",
79-
validator: validators.string
80+
hint: 'Minimum 6 characters',
81+
validator: 'string'
8082
}
8183
]
8284
},
8385
{
84-
legend: "Skills & Status",
86+
legend: 'Skills & Status',
8587
fields: [
8688
{
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']
9193
},
9294
{
93-
type: "checkbox",
94-
label: "Status",
95-
model: "status",
95+
type: 'checkbox',
96+
label: 'Status',
97+
model: 'status',
9698
default: true
9799
}
98100
]
99101
}
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-'
108109
}
109110
}
110111
}
112+
}
111113
```
112114
```html
113115
</script>

0 commit comments

Comments
 (0)