前端Error in v-on handler: “TypeError: Cannot read properties of null (reading ‘0‘)错误

Element中DateTimePicker组件, 点击清空按钮报错问题的解决 

问题引入: 

 1.前端页面插入了时间选择组件, 此时把时间参数作为条件进行查询是没问题的.(查数据创建时间)

2. 如果我选择了一个时间区间, 在数据库一个结果也查不到. 此时清空时间区间选择,点击搜索. 整个el-table依然是空, 并且前端页面报错.

        我希望得到的结果是, 当我清空时间选择组件, 相当于没有时间条件了, 可以查出其他的数据. 

问题产生原因:

 

        当点击清除按钮的时候，value值会被设置为null。也就是上图中value2=null.  此时@change绑定的方法中, 赋值操作会报错, 因为将null[0] null[1] 赋值给了表单对象中的属性. 

问题解决:

        修改时间时触发的事件@change, 加一个判断. 如果为空时, 将value值赋为" ", 并且将时间的查询条件赋空.

chooseTime() {
            if(this.value2==null){
                this.value2='';
                this.form.startTime=''
                this.form.endTime=''
            }else {
            this.form.startTime = this.value2[0];
                        this.form.endTime = this.value2[1];
            }
        }

这样DateTimePicker组件的清空按钮就能生效啦!