現在很多輸入框是通過前端寫死固定欄位，如果這些欄位是後端生成的呢？通過後端返回欄位，形如

{
   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處理掉就行了。