Question

我需要动态加载（部分）表单架构异步。例如，我想在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!都出现在控制台中，但输入测试的标签不会更改。

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

Answer 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     
    }
  }
}

更新：您不需要计算属性，它们可能导致有效性检查问题。只需操作属性direclty。 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
      }
    }
  }
}

如何动态加载vue-form-generator架构？

1 个答案: