element ui 表单验证 this.$refs[formName].validate()问题解决

一、前言

在开发Vue项目过程中，应用element-ui做表单验证遇到this.$refs[formName].validate()提示validate()未定义的问题。

二、问题原因

要验证的DOM，还没有加载出来。

三、解决方法

首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form（有时候获取到数组，需要按下标取值）。

其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：

1. 使用此方法前检查prop一定必须要写在<el-form-item>标签上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）；

2. el-form rules，model属性绑定，ref标识；

针对问题一的解决方法如下：

this.$nextTick(()  =>{
 
})

有关$nextTick的具体用法，请参考博文《Vue进阶（六十二）：理解$nextTick()》。

项目开发过程中，优化项目时考虑加入全屏功能。具体实践步骤如下：

项目中使用的是sreenfull插件，执行命令安装：

npm install --save screenfull

组件安装好后，引入项目，用一个按钮进行控制即可，通过Esc键退出全屏按钮方法如下：

<script>
import screenfull from 'screenfull'
export default {
  data () {
      return {
        isFullscreen: false
      }
   }，
  methods: {
    /**
     * 全屏事件
     */
    screenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'Your browser does not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = true
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
          isFull = false
      }
      return isFull
    }
  },
  mounted() {
   window.onresize = () => {
     // 全屏下监控是否按键了ESC
     if (!this.checkFull()) {
       // 全屏下按键esc后要执行的动作
       this.isFullscreen = false
     }
   }
 }
}
</script>

四、拓展阅读

• 《Vue进阶（幺零三）：Markdown 基本语法》

• 《Vue进阶（幺零二）：面试必备：2021 Vue经典面试题整理（含答案）》

• 《Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理》

• 《Vue进阶（九十二）：应用 postMessage 实现窗口通信》