element的el-input上使用vue修饰符.trim不能输入空格

6 篇文章 0 订阅
深夜记录一下这个问题,真的折腾了我一天,element的el-input上为了去除首尾空格,在v-model后面加了.trim,结果空格在输入框里压根输不进去。
我记得之前写的项目就算加了trim还是可以输入空格的,等调后台接口时会直接把首尾空格去掉的,这次怎么不行了呢。其他人说他们的项目就可以呀,我还看他们在本地跑的项目确实是可以的。我胡乱检查了node版本,vue版本,element版本,又看了其他人的正常的项目里的版本,绕了一大圈,结果发现问题所在是element,它的版本问题。
element官网上新版本上的输入框组件那里醒目的写着不支持v-model修饰符,我咋就没看到呢,咋就没去看element的文档呢,哎,解决问题的方法不对啊。后来我分别看了element的2.15.1以及前面好几个版本都这样写着不支持,试了下2.5.4,2.4.11,2.3.9版本,发现从2.5.4版本开始就已经不支持了,2.3.9和2.4.11版本都是可以随意输入空格的,记得切换版本尝试时,要重新npm run dev一下哦。

在这里插入图片描述

在此记录一下这次遇到的问题,遇到问题找寻问题点,多看一下官方文档。

解决办法

从其它博客找到了一个方法,那就是不用修饰符.trim,使用js的trim方法,在el-input的@blur事件中去除首尾空格,写法如下:

<el-input v-model="formData.name" @blur="formData.name=$event.target.value.trim()"></el-input>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值