详解Vue.js和layui日期控件冲突问题解决办法
2019-07-25 10:21
1131 查看
事故还原:
今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据.
下面是html+vuejs+layui
lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的.
对于这个情况大概处理思路是这样的:我们就不让他自动绑定了,把这个input的v-model属性去掉,然后再form表单提交之前利用jquery手动给这个属性赋值就好了.
<input type="text" id="beginTime" name="teacherLeave.leaveBegin" v-model="teacherLeave.leaveBegin" class="layui-input">开始时间 <input type="text" name="teacherLeave.reson" v-model="teacherLeave.reson" class="layui-input"> <script> layui.use('laydate', function() { var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem : '#beginTime' }); }); </script>
下面是具体处理的伪代码:
//模拟提交方法 saveOrUpdate: function () { //输出赋值之前的leaveBegin的值,为undefined //vm是vue.js页面的一个data对象,这部分是vue.js的知识,不用特别在意 alert(vm.teacherLeave.leaveBegin); //通过jquery获取html页面input的value值,并将这个值(即时间日期)赋给js中data的vm的teacherLeave属性 vm.teacherLeave.leaveBegin = $('#beginTime').val(); //输出赋值之后的leaveBegin的值,作对比 alert(vm.teacherLeave.leaveBegin); //获取的值不一样,说明赋值成功 }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 解决vue.js 模板和jinja 模板冲突问题
- 快速解决vue.js 模板和jinja 模板冲突的问题
- vue常见问题解决办法(一)|vue.js报错“Do not use 'new' for side effects“(main.js里)解决办法
- 关于Bootstrap日期控件datetimepicker被模态框等遮罩在底部的问题及解决办法。
- phpcmsV9中表单向导在js调用里日期控件在IE下报Calendar未定义的解决办法
- 详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法
- 详解django模板与vue.js冲突问题
- phpcmsV9中表单向导在js调用里日期控件在IE下报Calendar未定义的解决办法
- 学习两天Vue.js遇到的问题及解决办法。
- 【问题解决】BootStrap.css与layDate日期选择样式起冲突的解决办法
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
- 详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
- 验证控件和js脚本验证冲突问题
- 火狐不执行js的一些解决办法及火狐对js的兼容问题
- 解决fixfox下日期控件被拉长的问题
- prototype.js 和jquery-1.6.2.js冲突问题解决方法
- 关于AjaxControlToolkit的Accordion控件在vs2008下报错的问题及解决办法
- asp.net 用户控件 调用js问题解决方法
- 解决用JS修改服务器端控件值后在后台无法获取修改后值的问题
- Login控件的问题,希望有更好的解决办法