详解Vue.js和layui日期控件冲突问题解决办法
更新时间：2019年07月25日 10:21:31 作者：风一瞬
这篇文章主要介绍了详解Vue.js和layui日期控件冲突问题解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
事故还原:
今天在用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);
//获取的值不一样,说明赋值成功
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue2使用ts vue-class-component的过程
vue-property-decorator 是一个 Vue.js 的装饰器库,它提供了一些装饰器来让你在 Vue 组件中定义属性、计算属性、方法、事件等,本文给大家介绍vue2使用ts vue-class-component的相关知识,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要为大家详细介绍了Vue异步组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本文主要介绍了Element实现动态增加多个输入框并校验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
这篇文章主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了vue实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了elementUI实现级联选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用，这篇文章分步骤给大家介绍了vue-devtools的安装方法，需要的朋友参考下吧2018-04-04
这篇文章主要为大家详细介绍了vue大屏展示适配，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了详解vue移动端项目的适配(以mint-ui为例)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了一个Vue的内存泄露详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
最新评论