Vue dynamically generates the form and adds validation rules, the input input box cannot be entered

foreword

During the development process, I encountered a page that was a pure form configuration page with forty or fifty form items, so I had to find a way to generate it dynamically.

start

1. The data format returned by the background is:

	```
	formData: [{
            surplusValue: 100,
            usedValue: 0,
            quotasValue: 100,
            resourceType:"instance"
        },{
            surplusValue: 2000,
            usedValue: 0,
            quotasValue: 2000,
            resourceType: "cpu"
        }]
	```

I need to use the resourceType of each item as the variable name for two-way binding.

2. In data, declare the variable name object of two-way binding as formInfo:{}, get the background data formData in created, and process the data. Loop formData, get the value of resourceType and use it as the attribute name of formInfo. Note that when adding new properties to formInfo, it will not trigger a view update if the new property is added to the instance after the instance has been created. Because Vue does not allow dynamic addition of new root-level reactive properties (root-level reactive properties) on already created instances, when Vue's data declares or has assigned objects or arrays (the values ​​​​in the array are objects) When adding a new property to the object, if the value of this property is updated, the view will not be updated. However it is possible to add responsive properties to nested objects using the Vue.set(object, key, value) method:
Vue.set(vm.obj, 'e', ​​0)

       formData.forEach((item,idx)=>{
            this.$set(this.formInfo,item.resourceType,'');
        })
        

3. It can be used directly in the template.

  <el-form-item   v-for="(item,idx) in formData"  :label="item.resourceType" :prop="item.resourceType" >
      <el-input size="small" v-model="formInfo[item.resourceType]" :placeholder="item.quotasValue"></el-input>
      <i>已使用：{
   
   {item.usedValue }}</i>    
      <span>剩余：{
   
   {item.surplusValue}}</span>    
  </el-form-item>
                     

4. Add verification rules. The empty object rules are defined in data. When processing formData, add each rule to rules.

    this.formData.forEach((item,idx)=>{
            this.$set(this.formInfo,item.resourceType,'');
            //验证输入值为正整数；验证输入值不能小于原始配置数量
            let arry=[{message: '请输入正确的数量值',trigger: 'blur',pattern: config.validate.positiveInteger}]; 
            let obj = { //验证每个输入值大于原始配额
                validator:function(rule,value,callback){
                    if(value){
                         if((Number(value)<Number(item.quotasValue))){
                             callback(new Error("输入值应大于现有配额"));
                         }                        
                    }else{
                        callback();
                    }
                }, trigger: 'blur'};
            arry.push(obj);
            this.rules[item.resourceType] = arry;
        })

5. Then use the rules directly in the template.

 <el-form :model="formInfo" :rules="rules" ref="formInfo" label-width="200px">
 	...
 	...
 </el-form>

need attention

When adding a new attribute to formInfo, if formInfo[item.resourceType] is such that two-way binding cannot be performed, that is, the input box on the page cannot be entered. Hence this.$set(this.formInfo, item.resourceType, '') is required.