Example from readme fails to operate

[skvskv]

• I'm submitting a ...
  • bug report

• Do you want to request a feature or report a bug?
  Report a bug

• What is the current behavior?
  Example from readme fails to operate. Browser console shows a lot of errors:
  [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
  [Vue warn]: Property or method "schema" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  Property or method "model" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  [Vue warn]: Property or method "formOptions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
  Just follow your readme

• What is the expected behavior?
  Demo form shown + no errors in browser console, I suppose; idk what is meant to be expected behaviour of the demo from your readme to be honest.

• What is the motivation / use case for changing the behavior?
  Up to the maintainers of the package

• Please tell us about your environment:

  • Version: 2.2.2
  • Browser: Chrome 66.0.3359.181 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)
  • Language: ES6 transpiled, I suppose.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
  N/A

[zoul0813]

Please provide more detail, outline the steps you took... please provide your code.

[trickidicki]

I am also finding the same behaviour - init a project using vue-cli, add a new component testform.vue, copy the sample code in from here and see the same errors in the console.

Here's the code once I got it running:

<template>
  <div class="panel-body">
    <form>
      <vue-form-generator :schema="schema" :model="model" :options="formOptions">
      </vue-form-generator>
    </form>
  </div>
</template>

<script>
import Vue from "vue";
import VueFormGenerator from "vue-form-generator";
import validators from "vue-form-generator";

Vue.use(VueFormGenerator);

export default {
  data () {
    return {
      model: {
        id: 1,
        name: "John Doe",
        password: "J0hnD03!x4",
        skills: ["Javascript", "VueJS"],
        email: "john.doe@gmail.com",
        status: true
      },
      schema: {
        groups: [
          {
            legend: "User Details",
            fields: [
              {
                type: "input",
                inputType: "text",
                label: "ID (disabled text field)",
                model: "id",
                readonly: true,
                disabled: true
              },
              {
                type: "input",
                inputType: "text",
                label: "Name",
                model: "name",
                id: "user_name",
                placeholder: "Your name",
                featured: true,
                required: true
              },
              {
                type: "input",
                inputType: "email",
                label: "E-mail",
                model: "email",
                placeholder: "User's e-mail address"
              },
              {
                type: "input",
                inputType: "password",
                label: "Password",
                model: "password",
                min: 6,
                required: true,
                hint: "Minimum 6 characters",
                validator: validators.string
              }
            ]
          },
          {
            legend: "Skills & Status",
            fields: [
              {
                type: "select",
                label: "skills",
                model: "type",
                values: ["Javascript", "VueJS", "CSS3", "HTML5"]
              },
              {
                type: "checkbox",
                label: "Status",
                model: "status",
                default: true
              }
            ]
          }
        ]
      },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
        fieldIdPrefix: 'user-'
      }
    }
  }

}
</script>

[PeterC66]

I had something similar starting from the gitbooks example usage. To get it working I needed to:

• add in import Vue from 'vue';
• change validators.string to VueFormGenerator.validators.string
• move the whole formOptions object down beyond the next } (as currently it is wrongly a member of the schema object)
• (optionally) add in import 'vue-form-generator/dist/vfg.css';

Thanks for what looks like a useful system, and I look forward to using it fully.

---

For completeness note that, as the docs indicate, for usage in a local component, I replaced:

import Vue from 'vue';
Vue.use(VueFormGenerator);

by (after the export default {:

  name: 'SampleForm',
  components: {
    'vue-form-generator': VueFormGenerator.component,
  },

[zoul0813]

I’m working on the docs over the holiday, so I’ll try this out and see about getting it updated.

We’ve migrated the docs on GitBooks to a GitHub repro (vue-form-generator-docs), so feel free to submit a PR with changes.

[zoul0813]

@trickidicki PR #571 should resolve the README.md example

[zoul0813]

@PeterC66 the GitBooks docs have been moved to https://vue-generators.gitbook.io/vue-generators/

I've fixed the sample code in the usage section (as well as the README.md in the main project)

The updated examples should work with @vue/cli 3.x projects (tested with 3.0.1 and 3.2.1)