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)文章

使用babel-plugin-import?實(shí)現(xiàn)自動按需引入方式
這篇文章主要介紹了使用babel-plugin-import?實(shí)現(xiàn)自動按需引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue實(shí)現(xiàn)鼠標(biāo)懸浮切換圖片src
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)鼠標(biāo)懸浮切換圖片src，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue環(huán)境搭建報錯整理大全
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,對于程序員來說bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報錯整理的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
淺談vue項(xiàng)目重構(gòu)技術(shù)要點(diǎn)和總結(jié)
這篇文章主要介紹了淺談vue項(xiàng)目重構(gòu)技術(shù)要點(diǎn)和總結(jié),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
vue3 elementPlus部分組件樣式修改的方法
這篇文章主要介紹了vue3 elementPlus部分組件樣式修改的方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-01-01
羊了個羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本
這篇文章主要為大家介紹了羊了個羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue.js購物車添加商品組件的方法
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
Vue3+TS實(shí)現(xiàn)數(shù)字滾動效果CountTo組件
最近開發(fā)有個需求需要酷炫的文字滾動效果，發(fā)現(xiàn)vue2版本的CountTo組件不適用與Vue3,沒有輪子咋辦，那咱造一個唄，感興趣的小伙伴可以跟隨小編一起了解一下
2022-11-11
vue對象的深度克隆方式
這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09