Vuejs2 - проблема в генераторе формы

Question

Я использую плагин "vue-form-generator" для динамической загрузки полей, но я обнаружил ошибку

[Vue warn]: Не удалось смонтировать компонент: шаблон или функция визуализации не определены.найдено в генераторе vue-form

Вот мой код:

<template>
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</template>

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

Vue.use(VueFormGenerator);

export default {
  components: { VueFormGenerator },
  data: () => ({

    model: {             
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      skills: ["Javascript", "VueJS"],
      email: "john.doe@gmail.com",
      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
    }
  })
}
</script>

Answer 1

Чтобы использовать в качестве локального компонента, вы должны использовать этот синтаксис

import VueFormGenerator from "vue-form-generator";

//component javascript
export default{
  components:{
    "vue-form-generator": VueFormGenerator.component
  }
}

Если вы используете

import VueFormGenerator from "vue-form-generator";

Vue.use(VueFormGenerator);

, тогда он уже зарегистрирован VueFormGenerator какГлобальный.Вам не нужно регистрироваться в разделе components вашего кода.

Вот наш код с локальным компонентом:

<template>
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</template>

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

export default {
  components:{
    "vue-form-generator": VueFormGenerator.component
  },
  data: () => ({

    model: {             
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      skills: ["Javascript", "VueJS"],
      email: "john.doe@gmail.com",
      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
    }
  })
}
</script>