详解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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
非常好的js代码
Jun 27 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 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用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
django使用html模板减少代码代码解析
2017/12/12 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python中subprocess批量执行linux命令
2018/04/27 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
简单了解django索引的相关知识
2019/07/17 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
工商行政管理专业求职书
2014/05/23 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
小学见习报告
2014/10/31 职场文书
环境卫生标语
2015/08/03 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
python基于turtle绘制几何图形
2021/06/15 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
对讲机知识
2022/04/07 无线电
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby