问题描述:

Vue2工程中使用ElementUI表单(Form)的表单校验时出现报错:TypeError: Cannot read properties of undefined (reading 'validate')

本文作为踩坑记录,经过查阅资料后解决问题,为后来者提供快速解决方法,暂不分析其中原因。


解决方案:

一般来说,我们的代码参照官方提供的写法,如下:

 methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
}

首先,请确保代码中的验证规则(即rules)、属性设置(即prop)均正确,具体请参考elementUI官方文档。

确保上述几点后,仍然报错的,可以将$ref[formName].validate改为$ref.formName.validate即可正常运行

 methods: {
      submitForm(formName) {
        this.$refs.formName.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
}

 

Logo

前往低代码交流专区

更多推荐