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

大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。

本人项目中遇到的bug问题如下：

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

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

解决方案：

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

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

html部分：

<el-form :mode="form" ref='form' :rules='rules'>

        <el-form-item v-for='(value, key) in formFileMap' :key='key' :label='value' :prop='key'>

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

                </el-input>

        </el-form-item>

</el-form>

js 部分：

change(e, type) {

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

        if(type == 'username') {

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

        } else {

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

        }

}

 

网上看到也有推荐使用 input事件，里面用$forceupdate()方法，这个虽然也可以，但是会导致rules校验失败。需要自定义校验来解决，但是我没太看懂博主写的。。。。感兴趣的可以过去看下el-input无法输入的问题和表单验证失败问题-CSDN博客