详解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 相关文章推荐
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
javascript操作excel生成报表示例
May 08 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
图片自动更新(说明)
2006/10/02 Javascript
JS 继承实例分析
2008/11/04 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js取得url地址参数实例
2013/02/22 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
Python入门篇之正则表达式
2014/10/20 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
电气自动化自荐信
2013/10/10 职场文书
本科毕业生自荐信
2014/05/26 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
公积金接收函格式
2015/01/30 职场文书
小学运动会加油稿
2015/07/22 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS