记一次el-input使用的坑

el-input使用不同与原生input，所以在vue中改变绑定的数据时需注意

<el-input v-model="form.schedule" @input="validateNumber($event)" />

要想在input时改变form.schedule的值来改变输入框显示的值，以下方法是做不到的

//只可以输入1-7之间的数字
validateNumber(value) {if (!/[^1-7]/.test(value)) {this.form.schedule = value;} else {this.form.schedule = value.substring(0, value.length - 1);}
}

虽然改变了form.schedule的值，但是输入框显示的内容只会改变一次，然后显示的值与绑定的值无关，即输入什么显示什么，不再显示form.schedule的值

需要使用 this.$nextTick()

//驗證班期的有效輸入
validateNumber(value) {if (!/[^1-7]/.test(value)) {this.$nextTick(() => {this.form.schedule = value;});} else {this.$nextTick(() => {this.form.schedule = value.substring(0, value.length - 1);});}
}

搞定！

记一次el-input使用的坑相关推荐

rtl8811au黑苹果10.15_荣耀MagicBook I5黑苹果折腾记（超详细教程与排坑）
本文主要介绍如何安装Win10 + Mac OS双系统,以及安装过程中可能遇到的一些坑. 本人的机型是:MagicBook I5-8250U MX150独显 8GB+256GB (VLT-W50),更 ...
记C#和C++混合开发的坑们
为什么80%的码农都做不了架构师?>>> 记C#和C++混合开发的坑们开发网络摄像机的过程中,面对NetSDK.dll的许多的坑,完全看不懂的说啊! 先说一个例子吧.这个例子 ...
【踩坑记录】记一次MySQL主从复制延迟的坑
最近开发中遇到的一个MySQL主从延迟的坑,记录并总结,避免再次犯同样的错误. 情景一个活动信息需要审批,审批之后才能生效.因为之后活动要编辑,编辑后也可能触发审批,审批中展示的是编辑前的活动内容, ...
小林求职记（六）踩过Dubbo坑，回答印象深，干货整理
小林求职记系列文章,归置到公众号菜单栏,欢迎查看历史篇前传小林求职记(五)上来就一连串的分布式缓存提问,我有点上头.... 终于,在小林的努力下,获得了王哥公司那边的offer,但是因为薪水没有谈 ...
记一次confluence邮件服务器配置的坑（阿里企业邮箱）
公司想通过confluence自动发送邮件,项目经理搞了半天没搞定,公司服务器是阿里云服务器,有事就甩给我了,按照百度出来的方法试了下(可能大部分方式一,方式二就成功了,方式三可适用于阿里企业邮箱). ...
html 实时统计字数,记一次前端 input、textarea输入框实时统计字数（真实字数）...
需求:实时监听textarea/input的输入变化,并在页面上显示还能够输入多少字符. 初始做法(有问题,不准确): 仅仅使用on keyup事件 :导致在输入的时候会根据输入法状态把汉字拼音算进 ...
pb 调用虹软_记C# 调用虹软人脸识别那些坑
上一个东家是从事安防行业的,致力于人工智能领域,有自主人脸识别.步态识别的算法.C++同事比较称职有什么问题都可以第一时间反馈,并得到合理的处理,封装的DLL 是基于更高性能的GPU算法,可支持更多线 ...
记ViewModel和LiveData使用的一些坑与注意点
给出两个自己写的ViewModel: public class MyViewModel extends AndroidViewModel implements Serializable {public ...
记一次unity3d 游戏帧率踩坑的过程
优化方面,除了平时顺手做的代码方面优化,对象池以外,基本上没怎么去关注过,所以这一方面蛮白痴的.今天发现游戏帧率从一开始的100左右,会随着运行时间逐渐降低,甚至降到个位数,所以只能去查阅这方面的资料 ...
记一次fastJson使用的踩坑经历
他奶奶的,抱歉,不好意思,都要骂娘了.也许是自己第一次用第三方json解析库没啥经验吧,之前都是自己用官方提供的json api 来进行json解析,这次用了下阿里的fastjson,据说比Gson, ...

记一次el-input使用的坑

记一次el-input使用的坑

需要使用 this.$nextTick()

记一次el-input使用的坑相关推荐

最新文章

热门文章