vue调用layui日期选择器: 数据双向绑定失败

vue调用layui日期选择器


在这里插入图片描述
出现问题:
1.无法进行数据双向绑定
2.无论是单向数据绑定还是双向数据绑定,选择日期后,同级input元素输入新值,日期选择器input标签值将被清空
3.layui 日期选择器的change事件无效

个人觉得以上问题原因为:
问题一: layui是通过js将日期选择器html片段添加到html文件中,此时vue已经完成数据绑定,故此处的数据双向绑定无效。
问题二:初始化数据原因,因为数据绑定失败,所以初始值并未能刷新,故将初始值继续赋给当前input元素
问题三:原因可能是日期选择器的onfocus事件屏蔽了自定义change事件,但未验证过。

解决方法:
1.利用change事件进行手动赋值更新——失败,change事件无效
2.利用laydate的render函数里的done事件进行手动更新——解决以上三个问题

代码如下:
在这里插入图片描述