详解Vue.js和layui日期控件冲突问题解决办法


Posted in Javascript onJuly 25, 2019

事故还原:

今天在用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);
   //获取的值不一样,说明赋值成功
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
turn.js异步加载实现翻书效果
Jul 25 #Javascript
js 实现ajax发送步骤过程详解
Jul 25 #Javascript
MockJs结合json-server模拟后台数据
Aug 26 #Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 #Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
JS backgroundImage控制
2009/05/19 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
input的focus方法使用
2010/03/13 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
移动端界面的适配
2017/01/11 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
nodejs读取并去重excel文件
2018/04/22 NodeJs
微信小程序实现人脸识别
2018/05/25 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Pycharm远程调试openstack的方法
2017/11/21 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
python web框架 django wsgi原理解析
2019/08/20 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python右对齐的实例方法
2020/07/05 Python
python help函数实例用法
2020/12/06 Python
人力资源部培训专员岗位职责
2014/01/02 职场文书
情侣吵架检讨书
2014/02/05 职场文书
房产代理公证处委托书
2014/04/04 职场文书
关于旅游的活动方案
2014/08/15 职场文书
张思德观后感
2015/06/09 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js