el-input无法输入问题的解决
问题描述
无论是单独的el-input输入框,还是把它们放在表单项中,有时都会出现无法输入的问题:虽然鼠标可以点击此输入框,但还是没有办法显示出键盘的输入。
在el-input标签中添加@input=“change($event)”:
去实现此change(e)方法,效果为强行刷新视图:
change (e) {
this.$forceUpdate()
},
但是又有很多朋友反馈会有表单验证失效的问题等等。
解决措施
产生原因
前人的解决方案似乎并不“完美”。我在想,element-ui作为一个比较完整的ui库,应该早就考虑到了此问题。毕竟官方文档是学习的第一资料,我们来到官方文档可以发现,在input输入组件中有这样的提示:
在这里插入图片描述显然,一开始我们并没有绑定值,加上提示内容中所说的“显示的值将不会改变”,因此造成了“无法输入”的现象。
解决方案
还是按照文档中的提示来,我们有两个解决办法:
处理input事件并更新组件的绑定值;
使用v-model。
然而实际上,这两种方案是完全等效的,因为v-model是一个语法糖,使用v-model的效果等同于第一种处理方案:
1 本质上等同于:
<input :value=“test” @input=“test = $event.target.value”>
因此个人更推荐使用v-model,同时也是官方文档中使用的方式(毕竟是语法糖,使用起来还是很方便的)。详情用法请看代码以及其中的注释:
对于普通的input组件:
对于表单中的input组件:
总结
这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现。推荐使用v-model语法糖,这也是element-ui官方文档中的做法,并且要配合在返回数据中的名称,这是核心解决思想。如果有表单需要设置表单标签的属性,保持前后一致即可。当然,名称其实是自定义的,全凭自己习惯和喜好。
另外温馨提示,不要眼花把v-model用在el-form-item标签中哦!那样是无效的,必须在el-input标签中才行。