vue.js - validateField is not a function？

Question

elementplus表单效验，报错显示formDateRef.value.validateField is not a function

<template>    <div class="login-body">            <div class="login-panel">                <el-from                     ref="formDateRef"                    class="login-register"                    :model="formDate"                    :rules="rules"                    @submit.prevent                    >                    <div class="login-title">个人云盘</div>                    <el-from-item  prop="email">                        <el-input                            size="large"                            clearable                            placeholder="请输入邮箱"                            v-model.trim="fromData.email"                            maxLength="150"                        >                        <template #prefix>                            <span class="iconfont icon-account"></span>                        </template>                    </el-input>                    </el-from-item>                    <!--登录密码-->                    <el-from-item prop="password" v-if="opType==1">                        <el-input                            type="password"                            size="large"                            clearable                            placeholder="请输入密码"                            v-model.trim="fromData.password"                            show-password                        >                        <template #prefix>                            <span class="iconfont icon-password"></span>                        </template>                    </el-input>                    </el-from-item>                    <!--注册-->                    <div v-if="opType==0 || opType==2">                        <!--input输入-->                          <el-form-item  prop="emailCode" >                            <div class="send-emali-panel">                                <el-input size="large" placeholder="请输入邮箱验证码" v-model.trim="fromData.emailCode">                                    <template  #prefix>                                        <span class="iconfont icon-checkcode"></span>                                     </template>                                </el-input>                                <el-button class="send-mail-btn" type="primary" size="large" @click="getEmailCode">                                    获取验证码                                 </el-button>                            </div>                            <el-popover placement="left" :width="500" trigger="click">                                <div>                                    <p>请从垃圾箱中查找验证码</p>                                </div>                                <template #reference>                                    <span class="a-link" :style="{ 'font-size': '14px'}">                                        未收到邮箱验证码？                                    </span>                                </template>                            </el-popover>                                                     </el-form-item>                          <!--昵称-->                            <el-form-item  prop="nickName" v-if="opType==0">                              <el-input size="large" placeholder="请输入昵称" v-model.trim="fromData.nickName" maxLength="20">                                <template  #prefix>                                    <span class="iconfont icon-account"></span>                                </template>                             </el-input>                            </el-form-item>                            <!--注册密码，找回密码-->                            <el-form-item  prop="registerPassword" >                                <el-input type="password" size="large" placeholder="请输入密码" v-model.trim="fromData.registerPassword">                                    <template  #prefix>                                         <span class="iconfont icon-password"></span>                                    </template>                                </el-input>                            </el-form-item>                             <!--重复密码-->                             <el-form-item  prop="reRegisterPassword" >                                <el-input type="password" size="large" placeholder="请再一次输入密码" v-model.trim="fromData.reRegisterPassword">                                    <template  #prefix>                                        <span class="iconfont icon-password"></span>                                     </template>                                </el-input>                            </el-form-item>                    </div>                                        <!--验证码-->                    <el-from-item prop="checkCode">                        <div class="check-code-panel">                            <el-input                                size="large"                                placeholder="请输入验证码"                                v-model.trim="fromData.checkCode"                                >                                <template #prefix>                                    <span class="iconfont icon-checkcode"></span>                                </template>                             </el-input>                             <img src="checkCodeUrl" class="check-code" @click="changeChekCode(0)"/>                        </div>                                           </el-from-item>                    <!-- 下拉框 -->                      <el-form-item v-if="opType==1" >                        <div class="rememberme-panel" >                            <el-checkbox v-model="fromData.rememberMe" >记住我</el-checkbox>                        </div>                        <div class="not-account">                            <a herl="javascript:void(0)" class="a-link" @click="showPanel(2)">忘记密码</a>                                              <a herl="javascript:void(0)" class="a-link" @click="showPanel(0)">没有账号</a>                        </div>                      </el-form-item>                      <!--找回密码-->                      <el-form-item   v-if="opType==2" >                                                <a herl="javascript:void(0)" class="a-link" @click="showPanel(1)">去登录？</a>                                            </el-form-item>                      <!---->                      <el-form-item   v-if="opType==0" >                                                <a herl="javascript:void(0)" class="a-link" @click="showPanel(1)">去登录？</a>                                            </el-form-item>                      <!--登录按钮-->                        <el-form-item  >                          <el-button type="primary" class="op-btn" size="large">                            <span v-if="opType==1">登录</span>                            <span v-if="opType==0">注册</span>                            <span v-if="opType==2">重置密码</span>                          </el-button>                                                   </el-form-item>                </el-from>            </div>            <Dialog                :show="dialogConfig4SendMailCode.show"                          :title="dialogConfig4SendMailCode.title"                           :buttons="dialogConfig4SendMailCode.buttons"                           width=500px                            :showCancel="false"                           @close="dialogConfig4SendMailCode.show = false"                >                <el-form                  :model="formData4SendMailCode"                  :rules="rules"                  ref="formData4SendMailCodeRef"                  label-width="80px"                  @submit.prevent                >                                <el-form-item label="邮箱"  >                    {{ formDate.email }}                  </el-form-item>                 </el-form>                            <el-form-item label="验证码" prop="checkCode" >                    <div class="check-code-panel">                            <el-input                                size="large"                                placeholder="请输入验证码"                                v-model.trim="formData4SendMailCode.checkCode"                                >                                <template #prefix>                                    <span class="iconfont icon-checkcode"></span>                                </template>                             </el-input>                             <img src="checkCodeUrl" class="check-code" @click="changeChekCode(1)"/>                    </div>                </el-form-item>            </Dialog>                     <div class="videoContainer">            <video                :style="fixStyle"                class="fillWidth"                playsinline=""                autoplay=""                muted=""                loop=""                v-on:canplay="canplay"            >                <source src="../assets/1.mp4" type="video/mp4" />            </video>             </div>    </div></template><script setup>import{ ref, reactive , getCurrentInstance ,nextTick}from "vue"const {proxy} =getCurrentInstance();const api={    checkCodeUrl: "/api/checkCode",};//操作类型：0：注册；1：登录；2：重置密码const opType=ref(1);const showPanel=(type) =>{    opType.value=type;};const fromData =ref({});const formDateRef=ref();const rules ={    email: [{required: true,message:"请输入正确的邮箱"}],};const checkCodeUrl=ref(api.checkCode);const changeChekCode =(type)=>{        checkCodeUrl.value= api.checkCode + "?type="+type+"&time="+new Date().getTime;};//发送邮箱验证码const formData4SendMailCode = ref({});const formData4SendMailCodeRef = ref();const dialogConfig4SendMailCode = reactive({  show: false,  title: "发送邮箱验证码",  buttons: [   {    type: "primary",    text: "发送验证码",    click: (e) => {      submitForm();    },  }, ],});const getEmailCode=()=>{    formDateRef.value.validateField("email" ,  (valid) => {        if(!valid){            return;        }        dialogConfig4SendMailCode.show = true;    });};</script><script>  export default {    data() {      return {        videoCanPlay: false, //控制视屏加载状态显示图片        fixStyle: ''  //屏幕发生变化时给播放器设置的样式      }    },    mounted() {      this.getVideoStyle()    },    methods: {      //视屏播放失败展示背景图片      canplay() {        this.videoCanPlay = true      },      //监听屏幕大小实时给播放器设置宽高      getVideoStyle() {        window.onresize = () => {          const windowWidth = document.body.clientWidth          const windowHeight = document.body.clientHeight          const windowAspectRatio = windowHeight / windowWidth          console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')          let videoWidth          let videoHeight          if (windowAspectRatio < 0.5625) {            videoWidth = windowWidth            videoHeight = videoWidth * 0.5625            this.fixStyle = {              height: windowWidth * 0.5625 + 'px',              width: windowWidth + 'px',              'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',              'margin-left': 'initial'            }          } else {            videoHeight = windowHeight            videoWidth = videoHeight / 0.5625            this.fixStyle = {              height: windowHeight + 'px',              width: windowHeight / 0.5625 + 'px',              'margin-left': (windowWidth - videoWidth) / 2 + 'px',              'margin-bottom': 'initial'            }          }        }        window.onresize()      }    }  }</script><style lang="scss" scoped>.login-body {    height: calc(100vh);    background-size: cover;    display: flex;    .login-panel{        width: 430px;        margin-right: 15%;        margin-top: calc((100vh - 500px)/2);        .login-register{                position: fixed;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);            background: rgba(255,255,255,0.3);            border-radius: 5px;            margin-top: 10px;            padding: 25px;            .login-title{                text-align: center;                font-size: 18px;                font-weight: bold;                margin-bottom: 20px;                color: #0b1017;            }            .send-emali-panel{                display: flex;                width: 100%;                justify-content: space-between;                .send-mail-btn{                    margin-left: 5px;                }            }            .rememberme-panel{                width: 100%;                color:#007fff;            }            .no-account{                width:100%;                display: flex;                justify-content: space-between;            }            .op-btn{                width: 100%;            }        }    }    .check-code-panel{        width: 60%;        display: flex;        .check-code{            margin-left: 5px;            cursor: pointer;        }    }    .login-btn-qq{        margin-top: 20px;        text-align: center;        display: flex;        align-items: center;        justify-content: center;        img{            cursor: pointer;            margin-left: 30px;            width: 20px;        }    }    .login-page {        background-size: cover;        background-attachment: scroll;        width: 100%;        height: 100%;        display: flex;        align-items: center;        justify-content: center;    }    .login-background {        width: 100%;        display: block;        position: fixed;        top: 0;        height: 100%;        left: 0;        z-index: -99;    }    .login-content {        width: 640px;        height: 780px;        z-index: 2;        left: 600px;        top: 230px;        border-width: 0px;        background: rgba(0, 0, 0, 0.3);        backdrop-filter: blur(2px);        border-radius: 2px;        border: none;        box-shadow: none;        color: #ffffff;        display: flex;        justify-content: center;        align-items: center;    }    .videoContainer {        position: fixed;        width: 100%;        height: 100%;        overflow: hidden;        z-index: -100;    }        .videoContainer:before {        content: '';        position: absolute;        width: 100%;        height: 100%;        display: block;        z-index: -1;        top: 0;        left: 0;        background: rgba(25, 29, 34, 0.65);    }    .fillWidth {        width: 100%;    }  }</style>

解决

Answer 1

为什么要加.value