vue之數組定義和賦值的示例分析

小編給大家分享一下vue之數組定義和賦值的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

問題場景：vue頁面初始化展示請求后臺返回的數據失敗，沒有報錯

<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：

頁面部分：

發現問題：data定義的數據為[]空數組，沒有定義數組長度，而賦值的時候用數組下標賦值

修改代碼后如下：

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

打印effective_date的值：

頁面展示效果：

以上是“vue之數組定義和賦值的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！