快捷導(dǎo)航

vue踩坑記錄之?dāng)?shù)組定義和賦值問題

更新時(shí)間：2019年03月20日 15:31:57 作者：努力的小聰忙

這篇文章主要給大家介紹了關(guān)于vue踩坑記錄之?dāng)?shù)組定義和賦值問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

問題場(chǎng)景：vue頁面初始化展示請(qǐng)求后臺(tái)返回的數(shù)據(jù)失敗，沒有報(bào)錯(cuò)

<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ù)組長(zhǎng)度，而賦值的時(shí)候用數(shù)組下標(biāo)賦值

修改代碼后如下：

this.effective_date = [this.stamptimeToDate(detail.valid_date),this.stamptimeToDate(detail.invalid_date)];

打印effective_date的值：

頁面展示效果：

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

vue與iframe頁面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue使用openlayers創(chuàng)建地圖
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
關(guān)于Vue Webpack2單元測(cè)試示例詳解
這篇文章主要給大家介紹了關(guān)于Vue Webpack2單元測(cè)試的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08
vue2中使用quill編輯器+表格功能(步驟詳解)
這篇文章主要介紹了vue2中使用quill編輯器+表格功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
解決Vue頁面固定滾動(dòng)位置的處理辦法
本篇文章主要介紹了解決Vue固定滾動(dòng)位置的處理辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
Vue中$attrs與$listeners的使用教程
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
vue項(xiàng)目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項(xiàng)目使用.env文件配置全局環(huán)境變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vant2移動(dòng)端Vue組件庫問題記錄
Vant是一套輕量、可靠的移動(dòng)端組件庫,通過Vant可以快速搭建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動(dòng)端Vue組件庫問題的相關(guān)資料,需要的朋友可以參考下
2023-01-01