dynamically generate a form data element ui and parity (background incoming data)

　　Foreword

　　Recently, a demand by the return of the background data, to generate a form and add a check. In the process of doing, do good dynamic form, the key is to check. Bothering me for two days, and finally through to find information and "luck" was finally solved. The key point to solve the problem: VUE is responsive. Official Links: https://cn.vuejs.org/v2/guide/reactivity.html

　　The official had this to say: Restricted modern JavaScript (and  Object.observe has been abandoned), Vue unable to detect the object properties added or deleted. Since the Vue will be converted to perform property getter / setter at initialization instance, the property must  data exist on the object in order for Vue convert it to a type of response. E.g:

was vm = new Vue ({
  data:{
    a:1
  }
})

// `vm.a` is responsive to 

vm.b = 2
 // ` non-responsive to vm.b`

 

        For instance has been created, Vue allowed to dynamically add the root level of responsive property. However, it may be used  Vue.set(object, propertyName, value) a method of adding attributes to the nested object responsive. For example, for:

Vue.set(vm.someObject, 'b', 2)

　　You can also use  vm.$set an instance method, which is also a global  Vue.set alias method:

this.$set(this.someObject,'b',2)

　　Sometimes you may need to assign a number of new properties for existing objects, such as using  Object.assign() or  _.extend(). However, this new property is added to the object will not be updated. In this case, you should create a new property to be mixed in with the object of the original object with the object .

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

　　Back to the topic

　　A prototype: single cycle generated forms ( simple, no problems were encountered )

　　1. Form

 1 <el-form label-width="140px" :model="goodForm" size="small" style="width: 750px;">
 2   <el-col :key="index" :span="12" v-if="!(index%2==0)" v-for="(item,index) in goodForm.specSPUParams">
 3     <el-form-item :label="item.k" :prop="'specSPUParams.'+index+'.v'" :rules="[{required: true, message: item.k+'不能为空', trigger: 'blur'}]">
 4        <el-input v-model="item.v"></el-input>
 5     </el-form-item>
 6   </el-col>
 7   <el-col :key="index" :span="12" v-if="index%2==0" v-for="(item,index) in goodForm.specSPUParams">
 8     <el-form-item :label="item.k">
 9        <el-input v-model="item.v"></el-input>
10     </el-form-item>
11   </ </12>The-col
el-form>

　　2. Data initialization statement

1 data() {
2    return { 
3      goodForm: {
4        specSPUParams: []
5      }
6    }
7 }

　　3. The data structure returned back

 　　

　　Prototype II: generates multilayer cyclic form

 　　　　Demand is: generating a background based on the data returned form, as shown in a ; each of a form input, to add a dynamic input box, as shown in two ; where only various forms of the first input box for verification.

　　　　 Problems encountered: the input box to enter a value, the check can not disappear.

　　　　 Solution: VUE responsive understanding

 

 

　　

 

 

　　 

 

 

　　1. Form

 1 <el-form label-width="110px" :model="goodForm.specSKUParams" ref="sssss" size="small" style="width: 700px;" class="demo-dynamic">
 2    <div :key="index" v-for="(array,key,index) in goodForm.specSKUParams">
 3       <el-form-item v-for="(item, indexA) in array" :label="key" v-if="indexA===0" :key="indexA" :prop="key+'.'+indexA+'.v'"
 4               :rules="[{required: true, message: key+'不能为空', trigger: 'blur'}]">
 5          <el-input placeholder="请输入参数值" v-model="item.v" style="width: 500px;" @change="skuChange(key,indexA)"></el-input>
 6          <el-button class="btnG" v-if="indexA+1!==array.length" @click.prevent="removeDomain(item,key)" icon="el-icon-delete-solid" type="text" 
　　　　　　　　　　　　style="font-size: 18px;color: #545C64;"></el-button>
 7       </el-form-item>
 8       <el-form-item v-for="(item, indexA) in array" v-if="!(indexA===0)" :key="indexA">
 9          <el-input placeholder="请输入参数值" v-model="item.v" style="width: 500px;" @change="skuChange(key,indexA)"></el-input>
10          <el-button class="btnG" v-if="indexA+1!==array.length" @click.prevent="removeDomain(item,key)" icon="el-icon-delete-solid" type="text"
11                 style="font-size: 18px;color: #545C64;"></el-button>
12       </el-form-item>
13     </div>
14 </el-form>

　　2.数据初始化声明

1 data() {
2   return {
3     goodForm: {
4       specSKUParams: {}
5     }
6 　}
7 }

　　3.获得后台数据 (第2行的commonGet是自己封装的ajax请求；第4行是解决问题的关键点：给specSKUParams添加一个属性，这样此属性就具有响应式)

 1 getSpecParams() {
 2    commonGet('item/spec/querySpecParam?cID=76').then(res => {
 3      res.data.data.rows.forEach(item => {
 4         this.$set(this.goodForm.specSKUParams,item.name,true);
 5         this.goodForm.specSKUParams[item.name]=[{
 6            v:''
 7         }]
 8      })
 9    })
10  },

　　4.附带两个方法（动态增加输入框；动态删除输入框）

 1 skuChange(key, index) {
 2   //console.log(key);
 3   let len = this.goodForm.specSKUParams[key].length;
 4   //console.log(len)
 5   if (index + 1 === len) { //如果操作的是最后一个输入框就再添加一个输入框
 6     this.goodForm.specSKUParams[key].push({
 7       v: ''
 8     });
 9   }
10 },
11 removeDomain(item,key){
12   //console.log(item);
13   //console.log(key);
14   let index=this.goodForm.specSKUParams[key].indexOf(item);
15   this.goodForm.specSKUParams[key].splice(index,1);
16 },

　　Summary: Learn cool moment, it has been cool to learn!