Merge pull request vue-generators#571 from zoul0813/feature/469-fix-doc-examples

vue-generators#469 - fixes example in README, tested with a fresh vue-cli project

Author: zoul0813

README.md

@@ -109,73 +109,83 @@ If you want the slim down version, here is the changes:
 </template>
 
 <script>
-import VueFormGenerator from "vue-form-generator";
+import Vue from 'vue'
+import VueFormGenerator from 'vue-form-generator'
+import 'vue-form-generator/dist/vfg.css'
 
-Vue.use(VueFormGenerator);
+Vue.use(VueFormGenerator)
 
 export default {
-  data: {
-
-    model: {
-      id: 1,
-      name: "John Doe",
-      password: "J0hnD03!x4",
-      skills: ["Javascript", "VueJS"],
-      email: "[email protected]",
-      status: true
-    },
-
-    schema: {
-      fields: [{
-        type: "input",
-        inputType: "text",
-        label: "ID (disabled text field)",
-        model: "id",
-        readonly: true,
-        disabled: true
-      },{
-        type: "input",
-        inputType: "text",
-        label: "Name",
-        model: "name",
-        placeholder: "Your name",
-        featured: true,
-        required: true
-      },{
-        type: "input",
-        inputType: "password",
-        label: "Password",
-        model: "password",
-        min: 6,
-        required: true,
-        hint: "Minimum 6 characters",
-        validator: VueFormGenerator.validators.string
-      },{
-        type: "select",
-        label: "Skills",
-        model: "skills",
-        values: ["Javascript", "VueJS", "CSS3", "HTML5"]
-      },{
-        type: "input",
-        inputType: "email",
-        label: "E-mail",
-        model: "email",
-        placeholder: "User's e-mail address"
-      },{
-        type: "checkbox",
-        label: "Status",
-        model: "status",
-        default: true
-      }]
-    },
-
-    formOptions: {
-      validateAfterLoad: true,
-      validateAfterChanged: true
+  data () {
+    return {
+      model: {
+        id: 1,
+        name: 'John Doe',
+        password: 'J0hnD03!x4',
+        skills: ['Javascript', 'VueJS'],
+        email: '[email protected]',
+        status: true
+      },
+      schema: {
+        fields: [
+          {
+            type: 'input',
+            inputType: 'text',
+            label: 'ID (disabled text field)',
+            model: 'id',
+            readonly: true,
+            disabled: true
+          },
+          {
+            type: 'input',
+            inputType: 'text',
+            label: 'Name',
+            model: 'name',
+            placeholder: 'Your name',
+            featured: true,
+            required: true
+          },
+          {
+            type: 'input',
+            inputType: 'password',
+            label: 'Password',
+            model: 'password',
+            min: 6,
+            required: true,
+            hint: 'Minimum 6 characters',
+            validator: VueFormGenerator.validators.string
+          },
+          {
+            type: 'select',
+            label: 'Skills',
+            model: 'skills',
+            values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
+          },
+          {
+            type: 'input',
+            inputType: 'email',
+            label: 'E-mail',
+            model: 'email',
+            placeholder: 'User\'s e-mail address'
+          },
+          {
+            type: 'checkbox',
+            label: 'Status',
+            model: 'status',
+            default: true
+          }
+        ]
+      },
+      formOptions: {
+        validateAfterLoad: true,
+        validateAfterChanged: true,
+        validateAsync: true
+      }
     }
   }
 }
 </script>
+
 ```
 
 Usage in local components