vue踩坑記錄之?dāng)?shù)組定義和賦值問題
更新時間：2019年03月20日 15:31:57 作者：努力的小聰忙
這篇文章主要給大家介紹了關(guān)于vue踩坑記錄之?dāng)?shù)組定義和賦值問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
問題場景：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="結(jié)束日期"> </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ù)組下標(biāo)賦值
修改代碼后如下：
this.effective_date = [this.stamptimeToDate(detail.valid_date),this.stamptimeToDate(detail.invalid_date)];
打印effective_date的值：
頁面展示效果：
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
vue項目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue項目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue Webpack2單元測試的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了vue2中使用quill編輯器+表格功能,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
本篇文章主要介紹了解決Vue固定滾動位置的處理辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
vue項目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項目使用.env文件配置全局環(huán)境變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vant是一套輕量、可靠的移動端組件庫,通過Vant可以快速搭建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動端Vue組件庫問題的相關(guān)資料,需要的朋友可以參考下2023-01-01