vue中el-date-picker 回显后无法更新数据
题问题描述:
el-date-picker在新建时可以选择日期正常显示,在修改资料时先进行查询资料详情,并给el-date-picker赋值后再进行操作选择日期会出现数据无法更新的情况
<el-form-item label="培训日期" prop="timevalue">
<el-date-picker
style="width: 335px"
v-model="planForm.timevalue"
type="daterange"
format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
**@change="getpickerdata"**
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
原因分析:造成这个bug的原因就是绑定的事件问题
解决方案:
查看官方文档后,就改用了另一种事件blur:(当 input 失去焦点时触发)
// 直接把上面的change换成blur
@blur="getpickerdata"
改过之后又测试发现这个是可以更新数据重新赋值了,但是el-date-picker组件中的清空事件又失效了。。。。。。
这很让人头大。。。。
但是但是不要慌,经过我多事件的测试 最终、最终选择了input事件
// 再把上面的blur换成input就完事了
@input="getpickerdata"
就是这简单的一行代码耗费了小半天的时间。。。。不过最终也是解决了修改数据不更新不重新赋值的情况,也修改了el-date-picker不清空的bug。