vue动态生成表单并加验证规则，input输入框无法输入

前言

开发过程中，遇到一个页面是纯表单配置页面，表单项有四五十个，于是只能想办法动态生成。

开始

1、后台返回数据格式为：

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

我需要以每一项的resourceType为变量名进行双向绑定。

2、在data里声明双向绑定的变量名对象为 formInfo:{}，在created里取到后台数据formData，并对数据进行处理。循环formData，拿到resourceType的值并以此当做formInfo的属性名。注意在为formInfo新增属性时，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。因为Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)，所以当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：
Vue.set(vm.obj, ‘e’, 0)

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

3、在模板里直接使用就可以了。

  
      
      已使用：{{item.usedValue }}    
      剩余：{{item.surplusValue}}    
  
                     

4、加验证规则rules。data里定义空对象rules。在处理formData时候，为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)

5、接下来在模板里直接使用rules就可以了。

 
 	...
 	...
 

需要注意的地方

向formInfo里添加新属性时候，如果formInfo[item.resourceType]这样是不能进行双向绑定的，即页面上输入框无法输入。因此需要 this.$set(this.formInfo,item.resourceType,’’)。