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');
相关文章
vue 将Checkbox 多选框选中的值提交到后台
vue 将Checkbox 多选框选中的值提交到后台
|
JavaScript
vue elementUI select下拉框设置默认值
vue elementUI select下拉框设置默认值
1486 0
|
4月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
791 1
|
5月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
747 0
|
7月前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
82 1
|
JSON JavaScript 数据格式
vue提交select下拉框选中的值
vue提交select下拉框选中的值
62 0
|
JavaScript API
vue的select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性
486 0
|
JavaScript 前端开发
vue中select的option默认选中项的问题解决方案
vue中select的option默认选中项的问题解决方案