详解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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
实例解析php的数据类型
2018/10/24 PHP
js播放wav文件(源码)
2013/04/22 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Django model序列化为json的方法示例
2018/10/16 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
深入理解Python异常处理的哲学
2019/02/01 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
给老师的道歉信
2014/01/11 职场文书
会计辞职信范文
2014/01/15 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
先进人物事迹材料
2014/12/29 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
会议承办单位欢迎词
2019/07/09 职场文书