详解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学习笔记6 prototype的提出
Jan 11 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
js实现头像上传并且可预览提交
Dec 25 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
php 解压rar文件及zip文件的方法
2014/05/05 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
Python 装饰器深入理解
2017/03/16 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
python如何实现DES加密
2020/09/21 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
农场厂长岗位职责
2013/12/28 职场文书
远程教育心得体会
2014/01/03 职场文书
大学校庆邀请函
2014/01/11 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
运动会班级口号
2014/06/09 职场文书
单位委托书怎么写
2014/08/02 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android