vue踩坑記錄之數(shù)組定義和賦值問題
問題場景:vue頁面初始化展示請求后臺返回的數(shù)據(jù)失敗,沒有報錯
<el-form-item label="有效日期"> <div class="block"> <el-date-picker v-model="effective_date" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker> </div> </el-form-item>
data(){
return{
effective_date: []
}
}
methods: {
getContractInfo(){
this.service.hqStore.getContractList(this.$route.query.uid).then((res)=>{
let detail = res.datalist[this.$route.query.index];
this.effective_date[0] = this.stamptimeToDate(detail.valid_date);
this.effective_date[1] = this.stamptimeToDate(detail.invalid_date);
}
}
}
created(){
this.getContractInfo();
setTimeout(()=>{
console.log(this.effective_date);
})
},
輸出的this.effective_date:

頁面部分:

發(fā)現(xiàn)問題:data定義的數(shù)據(jù)為[]空數(shù)組,沒有定義數(shù)組長度,而賦值的時候用數(shù)組下標賦值
修改代碼后如下:
this.effective_date = [this.stamptimeToDate(detail.valid_date),this.stamptimeToDate(detail.invalid_date)];
打印effective_date的值:

頁面展示效果:

總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。
相關文章
vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-12-12
vue項目打包后,由于html被緩存導致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項目打包后,由于html被緩存導致出現(xiàn)白屏的處理方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
vue項目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項目使用.env文件配置全局環(huán)境變量的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06

