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

vue调用layui日期选择器出现问题：1.无法进行数据双向绑定2.无论是单向数据绑定还是双向数据绑定，选择日期后，同级input元素输入新值，日期选择器input标签值将被清空3.layui 日期选择器的change事件无效个人觉得以上问题原因为：问题一： layui是通过js将日期选择器html片段添加到html文件中，此时vue已经完成数据绑定，故此处的数据双向绑定无效。问题...

肉卷

2721人浏览 · 2019-03-19 11:47:16

肉卷 · 2019-03-19 11:47:16 发布

vue调用layui日期选择器

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

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^