vueフォームを動的に生成し、検証ルールを追加します.input入力ボックスは入力できません.

前言
開発中、1つのページが純粋なフォーム構成ページであり、フォーム項目が4、50個あるため、動的に生成する方法しか考えられません.
スタート
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[i tem.resourceType]のように双方向バインドができない場合、ページ上の入力ボックスは入力できません.だからthis.$set(this.formInfo,item.resourceType,’’).