Vuejs2- vue-form-generator 中的问题答案

【问题标题】：Vuejs2- Issue in vue-form-generatorVuejs2- vue-form-generator 中的问题
【发布时间】：2018-05-21 12:52:10
【问题描述】：

我正在使用“vue-form-generator”插件动态加载字段，但我遇到了错误

[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>

【问题讨论】：

标签： vuejs2

【解决方案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>

【讨论】：

不，它不起作用。我已复制您的代码并粘贴到我的文件中。它显示错误，例如 ** [Vue warn]: Error compile template: ** etc.,
你删除了Vue.use(VueFormGenerator);吗？
你知道如何更新 vuejs2 的“vue-form-generator”插件吗？？现在我当前的插件版本是“vue-form-generator v0.6.1”
其实是“vee-validate”和“vue-form-generator”插件的属性名冲突，所以出现了空白页
我已经像这样更改了“vee-validate”插件的配置。 const config = { fieldsBagName: 'inputs ', errorBagName: 'vErrors' }; Vue.use(VeeValidate, config);