开发(bug)总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)

111 阅读2分钟

点击添加,表单内可输入用户名 和 用户姓名,但有时会偶发出现无法这两个input框里面无法输入内容。

原因(可能):网上查了很多都没有给出明确的解释,有的说可能是因为组件嵌套太深导致的,也有可能是组件本身有潜在bug。真实原因也没搞懂,有知道的同学可以告诉下。

解决方案:

添加change事件,然后使用$forceUpdate方法强制刷新。(这个也有问题)

采用这个方法,也会偶然出现无法输入,在研究了之后,舍弃了$forceUpdate,采用下面的方法:

html部分:

       

                <el-input v-model='form[key]' @change="change($event, key)">

                

        

js 部分:

change(e, type) {

        // this.forceupdate() //强制数据刷新之后,验证失效,改用forceupdate() // 强制数据刷新之后, 验证失效, 改用 set ,亲测有效

        if(type == 'username') {

                this.$set(this.form, 'username', e)

        } else {

                this.$set(this.from, 'nickname', e)

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价,看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战,如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

开源分享:docs.qq.com/doc/DSmRnRG…