Vue動態添加v-model綁定及獲取其返回數據

從數據庫拿到的動態數據綁定到頁面對應的v-model或者v-bind上，並且根據對頁的操作獲取到返回的值：

1、首先在data里定義一個數據 timeTip 為一個空數組

data () {
    return {
        timeTip:[]
            }
    }    

2、將獲取到的數據進行動態生成，並塞入 timeTip 中

creadeTimeTip(data.data)      //返回的數據

creadeTimeTip(data){
          this.timeTip = []; //對空數組進行清空，以免影響后續操作
          var len = data.length; 
            for (var i = 0; i < len; i ++) {
                var item = {id: String(data[i].id),
                            name: String(data[i].name),
                            timelySwitch: Boolean(data[i].timelySwitch),//注意有的頁面有數據格式要求，可在此進行數據處理
                            timing: this.setDate(data[i].timing)
                            };
                this.timeTip.push(item); //將處理好的數據循環放進數組中
            } 
            
        }

3、在Vue頁面進行動態綁定，需要注意的就是在數據綁定時我用的是 timeTip[index].timelySwitch  而不是item ，否則當操作頁面時是不會有動態數據返回的

<div v-for="item,index in timeTip" :key="item.id"> 
      <span>{{index+1}}.{{item.name}}通知:</span>
      <el-switch v-model="timeTip[index].timelySwitch" active-text="及時推送"  inactive-text="" size="mini"></el-switch>
      <el-time-picker style="width:180px;" :clearable="false" size="mini" v-model="timeTip[index].timing" placeholder="請輸入24小時制時間">
      </el-time-picker>
</div>                

4、當在頁面修改數據后，在控制器輸出timeTip時，其數據也是改變后的數據