TimePicker组件报错收集(一)
自己测出的bug:当时间组件清空值后,选择时间不点确定点击取消,就报错:
报错信息:Error in getter for watcher “parsedValue”: “TypeError: Cannot read properties of null (reading ‘length’)”
最开始这样写报错:
日期组件
<el-form-item :label="客服在线时间" prop="dateArray">
<div class="block">
<el-time-picker
is-range
v-model="dataForm.dateArray"
type="datetimerange"
format="HH:mm:ss"
value-format="HH:mm:ss"
:range-separator="至"
:start-placeholder="开始时间"
:end-placeholder="结束时间"
align="right"
>
</el-time-picker>
</div>
</el-form-item>
导出变量开放使用
export default {
data() {
return {
dataForm: {
dateArray: ['',''],
},
}
},
监听Timepicker组件变化,如果为null,则重新赋值
watch: {
"dataForm.dateArray"(newVal) {
if (!newVal){
this.dataForm.dateArray = ['',''];
}
}
}
**解决方法:根据打印信息,发现清空后,监听打印值为null,再次选择值,点击取消打印出来的
[null, null, ob: Observer]这么个玩意,然后使用filter过滤,再重新判断数组长度,再重新赋值,即可解决问题 **
watch: {
"dataForm.dateArray"(newVal) {
if (!newVal){
this.dataForm.dateArray = ['',''];
}else {
//过滤数组中为null的元素,并重新判断数组有效长度
newVal = newVal.filter(item=>item!=null);
if (newVal.length===0){
this.dataForm.dateArray = ['',''];
}
}
}
}