详解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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
CCPry JS类库 代码
Oct 30 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
优秀毕业生推荐信
2013/11/02 职场文书
车间副主任岗位职责
2013/12/24 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Python基本数据类型之字符串str
2021/07/21 Python