详解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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js中typeof的用法汇总
Dec 12 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python实现大文件排序的方法
2015/07/10 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
期末自我鉴定
2014/01/23 职场文书
美发店5.1活动方案
2014/01/24 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
MySQL 条件查询的常用操作
2022/04/28 MySQL