[Vuejs]-How to dynamically load a vue-form-generator schema?

2👍

Just put the schema in a computed property and make it dependant on a data property. So the schema will change everytime you change a property on which it depends.

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

UPDATE:
You don’t need computed properties, they can lead to problems with validity check. Just manipulate the properties direclty.
PS: The $set method needs an index to work correct on arrays.

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
      }
    }
  }
}
👤Reiner

Leave a comment