Vue 表单验证报错 -- Cannot read property 'validate' of undefined

詩酒趁年华

于 2019-06-29 10:32:09 发布

阅读量8.8k

点赞数 5

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sinat_42664398/article/details/94131629

版权

vue 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了在Vue中如何使用$refs进行表单验证，并介绍了如何在关闭Dialog弹窗时通过before-close事件重置表单，确保用户体验的连贯性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把下面的$refs和表单ref名字保持一致就行了。

ref="loginForm"
this.$refs.loginForm.validate(valid => {   })

如果关闭 dialog 弹窗，表单验证还在？
在这里插入图片描述
给 dialog 添加 before-close 事件，

<el-dialog :title="templateTitel" :visible.sync="dialogTableVisible" width="480px" lable-width: :before-close="closeDialog">
    <el-form :model="uploadTemplate" :rules="templateRule" ref="uploadTemplate">
    	<el-form-item label="模板名称" prop="name" class="form_item">
            <el-input clearable v-model="uploadTemplate.name" size="small" placeholder="请输入模板名称" style="width:100%"></el-input>
       	</el-form-item>
		<div slot="footer" class="dialog-footer">
		  	<el-button @click="closeDialog">取 消</el-button>
		  	<el-button type="primary" @click="saveTemplate()">确 定</el-button>
		</div>
	</el-form>
</el-dialog>

methods: {
      closeDialog(){
	      this.$refs.uploadTemplate.resetFields()；
	      this.dialogTableVisible = false；
    },
}