vue 一個數組與多個input實現v-model綁定

接口返回的是一個數組，對應的是一堆的input組件，期望input與數組的configValue一一對應綁定，同時不希望做過多的數據操作

數據：( this.configList )

 

 

 表單：

 

 首先，使用計算屬性轉換

  computed: {
    configObj: function() {
      var obj = {};
      this.configList.forEach(element => {
        obj[element.configCode] = element;
      });
      return obj;
    }
  },

 

 然后直接數據綁定：

                    <el-col :span="20">
                      <div style="width: 475px;">
                        <el-time-select
                          size="medium"
                          v-model="configObj.GLOBAL_TIME_START.configValue"
                          :picker-options="{
                            start: '00:00',
                            step: '00:15',
                            end: '23:45',
                            maxTime: value2
                          }"
                          placeholder="開始時間點">
                        </el-time-select>

                        <span style="color: #bbb;">  至  </span>

                        <el-time-select
                          size="medium"
                          v-model="configObj.GLOBAL_TIME_END.configValue"
                          :picker-options="{
                            start: '00:15',
                            step: '00:15',
                            end: '24:00',
                            minTime: value1
                          }"
                          placeholder="結束時間點">
                        </el-time-select>
                      </div>
                    </el-col>