Vue动态绑定v-model

　　现在很多输入框是通过前端写死固定字段，如果这些字段是后端生成的呢？通过后端返回字段，形如

{
   key:'input1',
   label:'输入框1'
},{
   key:'input2',
   label:'输入框2'
}

　　然后根据键值对的数量动态渲染出相对应的input框，这样表单如果有新的字段添加的话前端就可以不用修改代码了。

<template>
     <h2>测试页面</h2>
     <div class="checkbox" v-for="(item,index) in inputList" :key="index">
         {{item.label}}:<el-input v-model="inputList[index].value"></el-input>
     </div>
</template>

<script>
export default {
    data(){
        return{
            inputList:[{
                key:'input1',
                label:'输入框1',
                value:''
            },{
                key:'input2',
                label:'输入框2',
                value:''
            },{
                key:'input3',
                label:'输入框3',
                value:''
            },{
                key:'input4',
                label:'输入框4',
                value:''
            },{
                key:'input5',
                label:'输入框5',
                value:''
            }]
        }
    },
    mounted() {
        this.$axios.get("/XX/XXXX").then(data => {
            this.inputList = data;
        });
    },
}
</script>

　　在此，需要说明的是一般前端需要的字段为key和label，label用来展示，告诉用户这个是什么，作说明用。后端一般需要key和value，key是字段名，不过一般中文做字段名怪怪的（在某些环境下使用可能会出bug，从通用性考虑一般使用英文）。anyway，如果不介意，只需要把label的值作key，再加上value这两个属性就够了。

　　总而言之，这三个字段够我们使用了，如果渲染前的请求后端不想发value字段，毕竟这个是为了填值用的，基本都是空值，这样就可以获取list之后forEach()来循环赋值一个空的value。当然，如果这些input框有需要后端返回的默认值除外。同理，在发请求送给后端的时候如果后端不需要label字段（不要嫌麻烦，一切都是为了规范，不用的字段不送），组报文的时候forEach()+delete处理掉就行了。