el-form中error重复错误只显示一次

简介: el-form中el-form-item的error属性监听的是watch方法,也就是两次重复的错误操作,提示的错误信息一致,就不会触发watch方法。就会导致第一次获取error信息,信息正常显示在了页面中,第二次获取到了同样的error信息,信息却不显示在页面中了。

问题

el-form中el-form-itemerror属性监听的是watch方法,也就是两次重复的错误操作,提示的错误信息一致,就不会触发watch方法。

就会导致第一次获取error信息,信息正常显示在了页面中,第二次获取到了同样的error信息,信息却不显示在页面中了。

解决方法

只需要在获取error时,先给一个空值,再来个this.$nextTick

修改前,只是直接赋值给变量error信息:

变量 = error信息;

this.errorPersonalForm = res.errors;

修改后,先置空,在再nextTick中赋值:

变量 = {}                    this.errorPersonalForm = {}
this.$nextTick(() => {      this.$nextTick(() => {
  变量 = error信息;              this.errorPersonalForm = res.errors;
})                          })


目录
相关文章
|
30天前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
101 49
|
30天前
|
JavaScript 前端开发 开发者
成功解决:el-popconfirm组件来确认删除、修改等操作无效
这篇文章提供了解决Element UI中el-popconfirm组件在执行确认删除、修改等操作时无效问题的步骤和方法,包括确认方法创建、检查版本兼容性、解决组件作用域问题、确保文本和CSS无冲突、检查事件绑定、预期问题和调试提示。
成功解决:el-popconfirm组件来确认删除、修改等操作无效
|
1月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
4月前
el-tree在el-form中通过rules进行校验
el-tree在el-form中通过rules进行校验
175 1
Input 标签监听内容输入(change、input 事件区别)
Input 标签监听内容输入(change、input 事件区别)
104 0
|
4月前
使用Form报错提示If ngModel is used within a form tag, either the name attribute must be set or the form
使用Form报错提示If ngModel is used within a form tag, either the name attribute must be set or the form
|
10月前
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
306 0
|
11月前
|
前端开发
使用el-menu的时候遇到的bug以及解决方式
使用el-menu的时候遇到的bug以及解决方式
313 0
|
11月前
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
555 0
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法