date-picker组件置空失败问题

1.问题描述

需求如下：就诊开始日期不能晚于就诊结束日期，就诊结束日期不能早于就诊开始日期。

实现方案：

• 给就诊开始日期（@change="begnChange"）和结束日期（@change="endChange"）分别绑定了两个方法

• 两个方法

      begnChange(value) {
        const endTime = this.form.getFieldValue('endTime')
        if (endTime !== undefined) {
          if (value > endTime) {
            this.$message.error('开始日期不能晚于结束日期')
            this.form.setFieldsValue({
              begnTime: '',
            })
          }
        }
      },
      endChange(value) {
        debugger
        const begnTime = this.form.getFieldValue('begnTime')
        if (begnTime !== undefined) {
          if (value < begnTime) {
            this.$message.error('结束日期不能早于开始日期')
            this.form.setFieldsValue({
               endTime: '',
            })
          }
        }
      },
  

问题：页面完成判断之后只会给出error信息，而不会置空data-picker的数据。

2.解决方案

使用$nextTick

• 将回调延迟到下次 DOM 更新循环之后执行
• 在修改数据之后立即使用它，然后等待 DOM 更新

    begnChange(value) {
      const endTime = this.form.getFieldValue('endTime')
      if (endTime !== undefined) {
        if (value > endTime) {
          this.$message.error('开始日期不能晚于结束日期')
          this.$nextTick(()=>{
            this.form.setFieldsValue({
              begnTime: '',
            })
          })
        }
      }
    },
    endChange(value) {
      debugger
      const begnTime = this.form.getFieldValue('begnTime')
      if (begnTime !== undefined) {
        if (value < begnTime) {
          this.$message.error('结束日期不能早于结束日期')
          this.$nextTick(function (){
            this.form.setFieldsValue({
              endTime: '',
            })
          })
        }
      }
    },

Vue的dom更新机制 & Vue的nextTick