详解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弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
javascript中的delete使用详解
Apr 11 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
js实现打字小游戏
Dec 17 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
竞选班长演讲稿
2013/12/30 职场文书
高一历史教学反思
2014/01/13 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
党员自我评价2015
2015/03/03 职场文书
商业计划书范文
2019/04/24 职场文书
工作报告范文
2019/06/20 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript