vue踩坑日记之element-ui日期选择器、时间选择器清空踩坑：TypeError: Cannot read property ‘0‘ of n

用户5741977039147
534 阅读1分钟

报错如下

[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
***TypeError: Cannot read properties of null (reading '0')

20210708113344196.png

原因分析

  • 在项目中使用了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，则是触发了清空
  • 这时一般要手动为其重新赋值，以免取值时报错
    ————————————————
    版权声明：本文为CSDN博主「蒲公英想养花」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    原文链接：blog.csdn.net/qq_37604640…
avatar
文章
阅读
粉丝