element时间选择器清空踩坑：TypeError: Cannot read property ‘0‘ of null

报错如下

• [Vue warn]: Error in render: “TypeError: Cannot read property ‘0’ of null”
• vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property ‘0’ of null
  

原因分析

• 在项目中使用了el-date-picker
• 在其清空后去取了date_range[0]导致报错
• 因为清空后date_range的值为null

<el-date-picker
    v-model="date_range"
    @change="zjmlist"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</el-date-picker>

解决

• 去你的项目中找读取了date_range[0]的地方
• 可能是在template中？

<span class="time-span">{{date_range[0]}} - {{date_range[1]}}</span>

• 也有可能是在某个method里面？

exportFun() {
  pdata.startTime = date_handle(this.date_range)[0]
  pdata.endTime = date_handle(this.date_range)[1]
},

• 这两种的思路都是，在被清空之后，在被读取之前进行处理，先给他赋值[]，在判断length是否>0，再去读取值

  if (!this.date_range) { // 如果被清空，手动给它赋值为[]
      this.date_range = []
  }
  if(typeof this.date_range!=='string'&&this.date_range.length!==0) {
      pdata.startTime = date_handle(this.date_range)[0]
      pdata.endTime = date_handle(this.date_range)[1]
  }
  this.cur_sel_time = this.date_range.length>0?(this.date_range[0]+' - '+this.date_range[1]):''

补充

• element的时间选择器没有提供专门的clear的api，但是change也可以捕捉到v-model的值被清空了
• 所以可以在change事件中去判断，如果v-model的值为Null，则是触发了清空
• 这时一般要手动为其重新赋值，以免取值时报错