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 多选框选中的值提交到后台
|
前端开发
Vue3输入框focus失效
Vue3引入elementplus的输入框el-input,如果想在鼠标点击即搜索框获得焦点后发生变化,那就得用到css的:focus选择器
506 1
|
22天前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
JavaScript
vue elementUI select下拉框设置默认值
vue elementUI select下拉框设置默认值
1348 0
|
2月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
306 1
|
2月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
133 0
|
11月前
|
JavaScript
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
85 2
|
10月前
|
JSON JavaScript 数据格式
vue提交select下拉框选中的值
vue提交select下拉框选中的值
45 0
|
10月前
|
JavaScript API
vue的select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性
260 0
|
10月前
|
JavaScript
vue 怎么将Checkbox 多选框选中的值提交
vue 怎么将Checkbox 多选框选中的值提交
56 0