如何动态加载 vue-form-generator 模式？答案

【问题标题】：how to dynamically load a vue-form-generator schema?如何动态加载 vue-form-generator 模式？
【发布时间】：2018-04-27 10:12:49
【问题描述】：

我需要异步动态加载（部分）表单架构。例如，我想在 REST 调用之后创建架构。

我开始使用vue-form-generator，我试图操纵架构创建一个组件：

创建带有标签Name-TEST-failed的文本输入
异步调用改变Name-TEST-success中标签的函数

代码：

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

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

Vue.use(VueFormGenerator);

export default {
  created(){

    setTimeout(() => {
      console.log("start!");

      Vue.set(this.$data.schema.fields,
         [{
            type: "input",
            inputType: "text",
            label: "Name-TEST-success",
            model: "name",
            placeholder: "Your name",
            featured: true,
            required: true
          }]
          )

        console.log("end!");
    }, 1000);

  },
  data() {
    return {
      model: {            
        name: "John Doe"
      },

      schema: {
        fields: [{
          type: "input",
          inputType: "text",
          label: "Name-TEST-failed",
          model: "name",
          placeholder: "Your name",
          featured: true,
          required: true
        }]
      },

      formOptions: {
        validateAfterLoad:     true,
        validateAfterChanged:     true
      }
    }
  }
}
</script>

消息start! 和end! 都出现在控制台中，但输入测试的标签没有改变。

如何动态更改架构（和模型）？

【问题讨论】：

标签： vue.js

【解决方案1】：

只需将架构放在计算属性中并使其依赖于数据属性。因此，每当您更改它所依赖的属性时，架构都会发生变化。

export default {
  created(){

    setTimeout(() => {
      console.log("start!");
      this.labelName = "Name-TEST-success"
    }, 1000);

  },
  data() {
    return {
      model: {            
        name: "John Doe"
      },

      // Add a new property that you can change as you wish
      labelName: 'Name-TEST-failed",

      formOptions: {
        validateAfterLoad:     true,
        validateAfterChanged:     true
      }
    }
  },
  computed: {
    schema () {
        var result = {
        fields: [{
          type: "input",
          inputType: "text",
          label: this.labelName,
          model: "name",
          placeholder: "Your name",
          featured: true,
          required: true
        }]
      }
      return result     
    }
  }
}

更新：您不需要计算属性，它们可能会导致有效性检查问题。只需直接操作属性。 PS：$set 方法需要一个索引才能在数组上正确工作。

export default {
  created(){

    setTimeout(() => {
      console.log("start!");
      this.fieldObject.label = "Name-TEST-success"
    }, 1000);

  },
  data() {
    var fieldObject = {
          type: "input",
          inputType: "text",
          label: this.labelName,
          model: "name",
          placeholder: "Your name",
          featured: true,
          required: true
        }

    return {
      fieldObject,  // now you can change label with "fieldObject.label = ..."
      model: {            
        name: "John Doe"
      },

      schema: {
        fields: [fieldObject]
      },
      formOptions: {
        validateAfterLoad:     true,
        validateAfterChanged:     true
      }
    }
  }
}

【讨论】：