Vuejs2- vue-form-generator中的问题

Question

我正在使用＆＃34; vue-form-generator＆＃34;用于动态加载字段的插件，但我遇到了错误

  

[Vue警告]：无法安装组件：未定义模板或渲染功能。在vue-form-generator中找到

这是我的代码：

<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

To use它作为本地组件，您应该使用此语法

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>