踩坑el-form ：error多次错误信息一致不显示问题

最新推荐文章于 2024-11-26 11:58:55 发布

原创最新推荐文章于 2024-11-26 11:58:55 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在Vue项目中，遇到el-form-item无法显示错误信息的问题，原因是错误信息未触发watch方法。通过在错误信息末尾添加Math.random().toFixed(2)并后续截取，确保每次错误信息不同，从而强制更新错误状态。代码示例展示了如何在验证失败时设置和清除错误信息，确保el-form-item能正确显示错误提示。

明明可以打印错误信息，但是el-form-item不显示error

经过搜索得知el-form-item的error属性监听的是watch方法，也就是两次重复的错误操作，提示的错误信息一致，就不会触发watch方法

解决方案，在错误信息增加了Math.random().toFixed(2)，在显示的时候再剪掉

<el-form-item label="网络地址" prop="cidr" :error="errorMsg.cidr?errorMsg.cidr.substring(4):''">

                if (!this.subnet.cidr) {
                    this.errorMsg.cidr = Math.random().toFixed(2) + "请输入网络地址"
                } else {
                    if (!this.publicFun.isIpv6Mask(this.subnet.cidr)) {
                        this.errorMsg.cidr = Math.random().toFixed(2) + "请输入正确IPV6地址，示例：2001:DB8:0:0:0:0:0:0/64"
                        console.log(this.errorMsg.cidr)
                    } else {
                        this.errorMsg.cidr = null
                    }
                }