VUE 时间控件赋值失败

问题

前端界面，点击时间控件时，控制其的最大输入。当赋值的类型为 String 的时候，只能成功第一次，后面的赋值不再是设置好的最大值，而是控件点击的值。但当赋值的类型为 date 时，却能一直成功。

// 时间控件
dtLastMenstrualPeriod.$on("change",function (e) {
    // 2020-07-08
    let createDate = dtCreate.value.substring(0, 10)
    // 时间控件选择的时间 2022-07-08
    let datePeriod = e.value;
    var cDate = new Date(createDate)
    var dDate = new Date(datePeriod)
    if (cDate > dDate) {
        form.setFormFieldValue('dtLastMenstrualPeriod', datePeriod)
    } else {
        // 断点一直能进入
        // string 第一次能成功赋值，连续赋值则出错，但是 debugger 也能进入
        form.setFormFieldValue('dtLastMenstrualPeriod', createDate)
       
      	// date 可以一直成功
        form.setFormFieldValue('dtLastMenstrualPeriod', bDate)
    }
})

原因

打的断点一直能成功进入。所以应该是 String 类型进行数据注入后，会被控件的值再次渲染。

为什么第一次会成功？

猜测：控件上的值类型转换：date -> string 和 string -> string 耗费的时间不一致。$on("change") 监听的时间过早，导致赋值会被重新渲染

解决

NextTick 的引入

原理：Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

$nextTick(() => {
    // 此时，控件本身的点击渲染已结束，再次赋值，将不会被更新
	form.setFormFieldValue('dtLastMenstrualPeriod', bDate.format('yyyy-MM-dd'))
})