Form report form v-model dynamic generation in Vue

Background data structure:

var PropertiesArray =  [
    {
      "propertyId": 1,
      "propertyName": "url",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    },
    {
      "propertyId": 2,
      "propertyName": "driver",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    },
    {
      "propertyId": 3,
      "propertyName": "user_name",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    },
    {
      "propertyId": 4,
      "propertyName": "password",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    }
  ]

Form form data in data:

 export default {
    data(){
        return {
            form: {
                    dataSourceName: '',   
                    description: '', 
                    typeId: 'db',  
                    createId: '',  
                }
        }
    }
 }

Specific code logic:

1. Merge the key of the dynamically generated Form form with the form data in the data after obtaining the background interface

//  后台接口请求（获得form包含的属性定义） 
dataSourceTypeProperties({dataSourceTypeId:dataSourceTypeId}).then(res=>{
     if (res.success == 1) {
            this.PropertiesArray = res.value;  // 赋值
            // 重要环节步骤1
            for(var i=0;i<this.PropertiesArray.length;i++){
                let items = this.PropertiesArray[i];
                this.$set(this.form,items.propertyName,'');   //往from添加当前数据源类型下对应的属性数据集合
            }
     }
})

2. Cycle data PropertiesArray to form DOM

//  DOM生成
<el-form-item v-for="(items,index) in PropertiesArray" :key="index" :label="items.description+'：'" :prop="items.propertyName" >
     <el-input v-model="form[items.propertyName]" class="taskInputWid"></el-input>
</el-form-item>

end:

    重点：<el-input v-model="form[items.propertyName]" class="taskInputWid"></el-input>