【vue】使用el-date-picker遇到的坑:回显后无法更新数据

          label="选择日期:"

          prop="timeArrange"

          required

          :label-width="formLabelWidth"

        >

         

            class="info-form-times"

            v-model="form.timeArrange"

            type="daterange"

            unlink-panels

            value-format="timestamp"

            range-separator="至"

            start-placeholder="起始年月日"

            end-placeholder="结束年月日"

            @change="handleTimestamp"

          >

       

我在使用elementUI里的日期选择器时,遇到了当没有设置选择器的初始值,首次打开,选择日期后,可以拉起@change事件;而当设置好回显值(初始值)时,无法拉起change事件的问题。

官网的el-date-picker组件的事件有以下三种:

【vue】使用el-date-picker遇到的坑:回显后无法更新数据_第1张图片
官方文档中的事件

经过测试,当事件绑定改为blur时,拉起handleTimestamp方法成功。看来原因出在事件监听的方式绑定上面。

            @blur="handleTimestamp"

我们再看一下源码中,为什么是blur才行:

【vue】使用el-date-picker遇到的坑:回显后无法更新数据_第2张图片
node_modules里,date-picker组件源码

node_modules里,date-picker组件内监听picker显示隐藏属性里拉起blur函数,但未拉起change函数。

使用blur事件驱动日期选择器数据问题,完美解决。

你可能感兴趣的:(【vue】使用el-date-picker遇到的坑:回显后无法更新数据)