Skip to content

Commit b0037c9

Browse files
committed
#469 - fixes example in README, tested with a fresh vue-cli project
* converted to single-quotes (vue-cli default settings) * converted `data` property into a function * added `validateAsync` to `formOptions` to show it is available * added `vfg.css` * added `Vue` import
1 parent 8c6c7eb commit b0037c9

File tree

1 file changed

+70
-60
lines changed

1 file changed

+70
-60
lines changed

README.md

+70-60
Original file line numberDiff line numberDiff line change
@@ -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
116118
export default {
117-
data: {
118-
119-
model: {
120-
id: 1,
121-
name: "John Doe",
122-
password: "J0hnD03!x4",
123-
skills: ["Javascript", "VueJS"],
124-
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+
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

181191
Usage in local components

0 commit comments

Comments
 (0)