ElementUI表单校验trigger设为change无效问题

简介: ElementUI表单校验trigger设为change无效问题

如果封装的自定义表单组件,内部存在el-form,所有的表单元素都在form内部,然后当整个form的数据变化时,this.$emit('input', value),这种情况不会触发表单的校验的,因为当前组件作为一个整体,被嵌入在el-form-item中,它并不知道你的数据变化了


以el-input为例,在源码中可以看到,在watch中监听value变化,并通知上层数据变了


watch: {
  value(val) {
    this.$nextTick(this.resizeTextarea);
    if (this.validateEvent) {
      this.dispatch('ElFormItem', 'el.form.change', [val]);
    }
  },
}


解决方案:

this.$emit('input',value);
//添加下面这句
this.$parent.$emit('el.form.change');
相关文章
|
7月前
|
JavaScript
js节点、属性操作,计时器,location、history对象,常见键盘事件
js节点、属性操作,计时器,location、history对象,常见键盘事件
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
2185 0
|
6月前
|
JavaScript
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
56 2
|
8月前
element表单组件的trigger表单验证逻辑规则
校验元素trigger属性值应该怎么选择?
212 0
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1494 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
541 0
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
|
JavaScript
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
423 0
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
SAP Spartacus auto focus Directive响应模型变化的一些触发时机例子
SAP Spartacus auto focus Directive响应模型变化的一些触发时机例子
SAP Spartacus auto focus Directive响应模型变化的一些触发时机例子