Layui与vue一起使用时form表单Lyaui date控件赋值后消失问题。

最新推荐文章于 2025-11-07 12:03:46 发布
原创 最新推荐文章于 2025-11-07 12:03:46 发布 · 832 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

在使用layui与vue框架时，若表单input框采用双向绑定，直接赋值会导致数据不同步，表现为输入值时其他input框内容消失。正确做法是在按照layui方式赋值后，再同步更新vue中的data，实现双向赋值。

在layui与vue一起使用时，表单中的某个input输入框在输入值的瞬间，表单中其它的input框中的值都不见了。这个是因为表单的input框在vue中做了双向绑定，在按照layui的方式给表单赋值时在表单中看见了值，但是vue中的对象并没有赋值，做了双向绑定，导致在某个input输入时，触发了vue将表单刷成了没有值的状态。

总结：只要layui与vue配合使用，做了双向绑定，不管是给什么类型的元素赋值，都需要按照layui的方式赋值，然后再给vue中的data赋值。只有双向赋值了，才能赋值成功

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）一：项目规划及初始化
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
06-17 9836
使用vue3+Layui实现通用管理系统前端，使用vue3+layui搭建系统UI界面，使用nodejs搭建模拟web服务器，使用echarts实现系统可视化模块，可以此项目为基础进行扩展开发，快速搭建管理系统。
elementui 日期时间选择器时间赋值后台时间后，点击无法更改
weixin_42775357的博客
07-14 2335
需求是这样的： 数据渲染表格，表格里每行都有一个“编辑”按钮，点击拿到当前点击行的信息，并弹窗展示该行信息，并可编辑，其中有一项就是有效期，该项用到element ui 的日期时间选择器，type设置为datetimerange，但是！给日期时间控件添加了当前行内的日期后，点击重新更改日期，model是拿到最新值了，view没有拿到，点击确定后展示的还是旧的值，看了一些参考文章，得出代码： html： <el-date-picker v-model="templateList.rangedate"
使用 Vue + LayUI 做后台管理、RESTful 交互
热门推荐
IT小村
08-22 9万+
一、前言 1、之前使用了 React/Angular，使用起来显然是比 jQuery 好多了，但时隔半年，最近再次深入研究了 vue，很惊喜。 故以后选择 MVC/MVVM 框架的话，建议首选 vue，主要是其代码结构，清晰简单。 2、使用 vue + layui 了，但 layui 里边的 layui.js 模块 vue.js 冲突， 因此放弃使用 layui.js，导致很多高级...
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
layui-vue：企业级应用构建的高效Vue组件库
最新发布
gitblog_00068的博客
11-07 1042
layui-vue基于Vue 3.0构建，继承layui设计理念，提供80+开箱即用组件，覆盖后台管理系统全流程需求。组件API设计符合直觉，减少学习成本，实现"安装即生产"的开发体验。 采用"设计系统+组件库"双模架构，统一设计语言的同时保持组件独立性，支持跨项目样式复用。配套完善的类型定义文件，实现开发阶段错误捕获，降低生产环境异常率。💡 ## 🛠️ 技术解析：深度优化的前端工程化实践
form layui vue 和_vue和layui一起用好用吗？
weixin_42396760的博客
12-24 593
来了来了我来了，看到这个问题我顿时笑出了声，不是嘲讽题主多无知，而是我这么干过，果然我不是第一个这么想的，哈哈哈哈可以给你说说会遇到的问题。当时大三，在做学校的科研系统，类似OA是会正儿八经的用的平台，当时技术选型，是我们几个拉跨学生在干，都不了解Vue，就我用过Vue.js，然后当然用Layui呀，用的是Layui的Admin版本，买了授权，但是当时我学了点Vue的基础，属于半桶水的那种，老是觉...
vue+layui一起好用吗？vue+layui怎么使用？全篇没代码，博主已被劝退成功！
阿小绿的博客
08-07 4529
今天脑子突发奇想，想到了layui，然后考虑到自己会用vue就想着把vue+layui结合一起使用。就准备看看网上有没有人用，我学习观摩一下。结果就看到一位知乎大神的发言。 第二位人家的血泪史 结果就是：layui是底层dom操作，基于jQuery，但是Vue.js并不推荐直接进行底层dom操作。 UI库还是用element那种基于Vue开发的组件库吧 所以只要敢放弃，就不会遇到困难！成功被劝退，噢耶！ ...
vue element 打开抽屉给表单赋值失败什么问题
05-29
在 Vue 中使用 Element UI 的抽屉组件时，如果表单赋值失败，可能涉及以下几种原因及对应的解决方法： #### 1. **数据绑定问题** 如果 `v-model` 或者 `:value` 没有正确绑定到父组件的响应式数据上，可能会导致...
vue3el-date-picker日期选择器使用赋值
03-08
### Vue 3 中使用 Element Plus 的 `el-date-picker` 组件 #### 单个日期选择器的配置与赋值 对于单个日期的选择，可以按照如下方式定义模板部分： ```html <el-form-item prop="install_date" label="安装日期:...
原生form表单元素使用+v-model在input中使用
qq_43260366的博客
11-20 1534
当选择微信支付，点击提交按钮时默认会向xxx地址发送一个请求，请求url为 xxx?pay=‘wxpay’在type为radio时。
记录Vue 使用Ant Design of Vue项目中小技巧（持续更新）
weixin_45844542的博客
12-31 1486
一、深度拷贝 场景复现：在进行编辑表格某项数据时模态框进行回显数据，修改数据时当前模态框里面的值会影响到表格里面的数据，在进行取消操作时表格的数据会莫名消失。解决代码如下： editChiidren(val) { this.title = '编辑' this.visible = true this.form = JSON.parse(JSON.stringify(val)) }, 二、图片上传（这里是使用了Ant Design of Vue组件库） 场景复现：
vue跟layui样式整合！大坑
qq_37048894的博客
04-30 2万+
在你观看这篇文章前，我真的一点都不建议你layui的界面更vue.js混合使用。 如果你已经开始了，那当我没说过。 添加第三方js,css 常见的layui.all.js。vue.min.js、这些都是可以百度到的。没必要添链接了 在页面中同时引入这两个文件 修改页面样式，写代码 这是我已经整合过的。 编辑： 接下来，贴代码 //使用Vue渲染模板，初始化时是没有数据的，...
好消息：用 vue3+layui 共同铸造我们新的项目
浩星
10-09 3814
layui这个框架不知道多少人还在关注着，记得第一次接触它是在18年，后来随着vue，react的盛行，jquery+layui的模式受到了特别大的冲击，后来作者都放弃维护他的官方网站，转而在github/gitee上做后期维护了，但是现在好消息，他又升级了，现在可以在vue3上使用他了，而且功能更加强大，对比element/iview/antd 这些流行框架，他也有很多自己的特色。从2022.9开始发布稳定版本的它，在经历了风雨后，也将绽放他的魅力！
vue项目中使用layui
u012732909的博客
03-30 1万+
背景 项目是vue+element UI 一、引入 第1种方法： 从www.layuiweb.com或https://gitee.com/sentsin/layui/tree/master/下载 复制dist文件夹到项目的public目录下重命名为layui 第2种方法： 在项目中安装layui-src依赖 yarn add layui-src | npm install layui-src 在node_modules下找到layui-src下的build文件夹复制到项...
vue中使用layui
woshixiaoy的博客
03-08 3951
*如何在vue中使用layui 第一次在vue中使用layui，完全不知道怎么引入样式与功能，百度了很多办法才弄好，特意来记录一下使用的过程，本次使用vue 2.x ，使用vue/cli构建项目，用vue create 【项目名称】，来创建项目。 下载layui 将使用脚手架创建的项目给清空一下，保留最原始的页面，后续将在清空的页面进行页面的编辑。 1.使用npm命令，在vue项目中下载layui。 命令：npm i layui-src 下载完成后，我们会在根目录下的package.json文件中看到我们下
layui和vue结合使用，数据的重新渲染问题
qq_31706095的博客
08-28 2599
问题分析：layui的渲染和vue数据的渲染是不同步的，有可能layui先渲染完毕了，vue的数据还没有渲染完，这样就会导致一些空间比如select,checkbox等控件是没有的 解决方法:可以调用$nextTick这个方法，就可以保证vue的数据加载完毕之火，layui才去渲染。 ...
LayUI表单如何下使用Vue?看这里!
TerryLam2010的博客
05-22 1563
Vue Component 实现Select 由来，因为使用LayUI，select，radio,checkbox 都会被托管，无法双向绑定，所以把这三个 利用layui的样式，用vue重写一遍。 Component 知识 https://cn.vuejs.org/v2/guide/components.html 必须看完才能往下走 要观察layui托管组件后，生成的Html代码，把对应的html代码拷贝下来。 html代码 <div class="layui-form-item"
layui与vue同时使用，绑定数据，无法正确显示的问题
Heizer的博客
03-01 3251
功能描述：根据“上午”、“下午”的不同选择，展示不同的菜品信息 菜品复选框使用layui的样式，复选框的文字使用vue绑定 &amp;lt;div class=&quot;main-head&quot;&amp;gt; &amp;lt;p&amp;gt;&amp;lt;span&amp;gt;在线预定&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt; &
layui数据表单将时间戳显示日期
WEN_Windy的博客
09-11 1972
// 数据表单时间戳转换为日期显示 function DateFormat(sjc){ var date = new Date(sjc); var y = date.getFullYear(); var m = date.getMonth()+1; m = m<10?'0'+m:m; var d = date.getDate(); d = d...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值