【踩坑日记】解决antd vue input每输入一个字符就失去焦点

今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。结论检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。思路这种情况首先考虑是组件变化重新渲染的问题。验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。检查key值，果然：...

前端摸鱼狮

4710人浏览 · 2021-03-26 15:26:49

前端摸鱼狮 · 2021-03-26 15:26:49 发布

今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。

结论

检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。

思路

这种情况首先考虑是组件变化重新渲染的问题。
验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。
控制台示例
检查key值，果然：
bug代码

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^