Vue根据后端返回数据显示不同的form-item

后台返回的数据

需求

获取后台返回的data中的json对象，根据其键值对的数目前端显示相应数目的form-item，并且label显示为键值对的值。

实现

实现思路

• 不同数目的form-item采用v-if来实现组件是否显示，假设要显示的item最多10个，对每一个form-item从上到下绑定v-if,如v-if = " itemNum>=1 "实现第一个form-item是否显示，当键值对数目大于等于1即显示。
• 每个form-item显示键的值，采用label属性绑定变量实现。注意不能用label = {{var}}这种形式，要用:label="var"。记得加冒号。
• 取出键的值，赋值给label绑定的变量，采用取出键的值，将其存到数组里，再逐个赋值给变量实现。

具体实现

• form组件

<el-form ref="form" :model="form" label-width="150px" style="border-width: 5px;border-color: blue">
             <el-form-item v-if="itemNum>0" :label="val1">
               <el-input
                 v-model="form.v1"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>1" :label="val2">
               <el-input
                 v-model="form.v2"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>2" :label="val3">
               <el-input
                 v-model="form.v3"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>3" :label="val4">
               <el-input
                 v-model="form.v4"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>4" :label="val5">
               <el-input
                 v-model="form.v5"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>5" :label="val6">
               <el-input
                 v-model="form.v6"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>6" :label="val7">
               <el-input
                 v-model="form.v7"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>7" :label="val8">
               <el-input
                 v-model="form.v8"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>8" :label="val9">
               <el-input
                 v-model="form.v9"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>
             <el-form-item v-if="itemNum>9" :label="val10">
               <el-input
                 v-model="form.v10"
                 clearable
                 type="number"
                 style="width: 100px"
                 @focus="getInputFocus($event)"
               />
             </el-form-item>

           </el-form>

• script中写

const defaultForm = {
 v1: null,
 v2: null,
 v3: null,
 v4: null,
 v5: null,
 v6: null,
 v7: null,
 v8: null,
 v9: null,
 v10: null
}
//...
data() {
   return {
     itemNum: 0,
     val1: '',
     val2: '',
     val3: '',
     val4: '',
     val5: '',
     val6: '',
     val7: '',
     val8: '',
     val9: '',
     val10: '',
     form: Object.assign({}, defaultForm)
   }
 },
 //...
 cutStr() {
     this.$http.get('http://localhost:8080/missileTarget/targetGesture', { params: {
       id: 1
     }}).then((response) => {
       if (response.data.code === 200) {
         this.$message({
           type: 'success',
           message: '成功'
         })
         console.log(response.data)
         const ww = Object.keys(response.data.data).length
         this.itemNum = ww
         const keyArray = [] //键数组
         const valueArray = [] //值数组
         for (const key in response.data.data) {
           keyArray.push(key)
           valueArray.push(response.data.data[key])
         }
         this.val1 = valueArray[0]
         this.val2 = valueArray[1]
         this.val3 = valueArray[2]
         this.val4 = valueArray[3]
         this.val5 = valueArray[4]
         this.val6 = valueArray[5]
         this.val7 = valueArray[6]
         this.val8 = valueArray[7]
         this.val9 = valueArray[8]
         this.val10 = valueArray[9]
       } else {
         this.$message({
           type: 'error',
           message: '失败'
         })
       }
     })
   },