1. 程式人生 > >Vue動態添加v-model綁定及獲取其返回數據

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

ace date lse width switch mini 進行 控制 ++

從數據庫拿到的動態數據綁定到頁面對應的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時,其數據也是改變後的數據

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