报错如下

  • [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，则是触发了清空
  • 这时一般要手动为其重新赋值，以免取值时报错