使用el-date-picker点击清空参数变为null的问题

w宇宙王

已于 2023-01-06 10:44:50 修改

阅读量2.4k

点赞数 1

分类专栏： elementui Date-picker vue 文章标签： javascript vue.js 前端

于 2022-12-27 16:59:46 首次发布

本文链接：https://blog.csdn.net/m0_52244931/article/details/128458374

版权

vue 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

elementui

15 篇文章 0 订阅

订阅专栏

Date-picker

1 篇文章 0 订阅

订阅专栏

当使用el-date-picker日期选择器时不设置clearable属性或者 :clearable = true 时候，将显示清除按钮。
点击清空按钮时并不是将v-model绑定对应得 value 值置空。而是v-model所绑定的值会变为null 。
并且根据你写得代码页面可能会报一下错误。请添加图片描述
根据帖子可加个判断判断是否存在，不存在时候，进行一个初始化

      if (!this.FormDate.value1) {
        this.FormDate.value1 = [];
        this.startTime = "";
        this.endTime = "";
      }

当清空后第一次点击没问题，当第二次点击时，依旧会报上面错误。

最终解决方案 采用watch监听，当newVal == null时，进行初始化

  data() {
    return {
         FormDate: {
           value1: ["2022-12-08", "2022-12-08"],
          },
         startTime: "",
         endTime: "",
     }
    }，
  watch:{
   "FormDate.value1"(newVal){
     if(newVal == null){
       console.log("空");
       this.FormDate.value1 = ""
       this.startTime = '',
       this.endTime = ''
     }
   }
  },