el-input 事件@change.native.prevent后不失去光标直接点击submit提交按钮,绑定失败

Element UI 中@change事件与submit交互问题及解决
本文探讨了在使用Element UI(版本2.12.0)时遇到的一个问题:在el-input组件中输入值未失去焦点就点击提交,导致提交的数据为空。原因是submit先于@change触发。解决方案是在submit方法内使用setTimeout延迟执行业务代码,确保@change事件有机会更新数据。此方法有效但可能不是最佳实践,提示开发者关注异步事件处理和表单提交逻辑。

发现@change事件里面el-input绑定的数据没有在submit里面变化的问题。

说的通俗一点就是,页面el-input输入了一个值,没有失去光标就点击了提交按钮,发现提交的el-input里面的值为空,而第二次提交的时候才能成功提交,这个时候是先触发的提交,后触发的@change导致的,做法就是在submit按钮的方法里面的业务代码用setTimeout( () => {},1000)去包括以下,相当于对submit方法做了延时。可能和所使用的elmentui的版本(2.12.0)有关系,不过能解决问题就是最好的。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值