详解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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
一文读懂Python 枚举
2020/08/25 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
《孙权劝学》教学反思
2014/04/23 职场文书
环保倡议书范文
2014/05/12 职场文书
工程售后服务方案
2014/06/08 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
起诉意见书范文
2015/05/19 职场文书
学习心得体会
2019/06/20 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android