TimePicker组件报错收集（一）

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 = ['',''];
          }
        }
    }
  }