专栏首页acoolgiser_zhuanlanvue element-ui 表单验证 第一次表单验证的结果,在第二次表单验证时仍然存在

vue element-ui 表单验证 第一次表单验证的结果,在第二次表单验证时仍然存在

首先我们还是看一下文章:https://blog.csdn.net/weixin_37930716/article/details/90234705  的内容

笔者在参考该文章的时候,踩了一个坑,是vue父子组件通信中使用ref传参的问题!

关键点:

该文章的作者的弹框组件是和父组件写在同一个vue文件里的,也就是没有单独把弹框的页面代码写在另一个vue文件里。这样在父子组件通信的时候其实只有两级通信,如果写在单独的一个vue文件里,实际上就是三级通信。

清除上一次验证结果的代码就应该是:

if (this.$refs.子组件名称.$refs.editForm)

this.$refs.子组件名称.$refs.editForm.resetFields();

完整的案例展示:

代码1:对话框和父组件的页面代码是在同一个vue文件里

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>

    <el-dialog
      title="测试对话框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="refdata"
          ><el-form-item
            label="测试输入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能为空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

此时只有两级通信,在【添加】按钮点击事件中添加如下代码即可:

handleAddDialogOpen() {
      if (this.$refs.refdata) {
          this.$refs.refdata.clearValidate();
      }
      this.visible = true;
},

 代码2:对话框是单独的一个vue文件,和父组件不是在同一个vue文件里

【添加】按钮所在的 父组件的代码(简单示意)

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>
    <testDialog ref="testDlg"> </testDialog>
  </basic-container>
</template>

<script>
import testDialog from "./testDialog";

export default {
  components: { testDialog }

  data() {
    return {
       ... //此处省略
    }
  },
  methods: {
    handleAddDialogOpen(row) {
      ...//此处省略

    }
  }

}
</script>

 testDialog 对话框子组件的另一个vue文件的代码:(注意ref参数)

<template>
  <basic-container>
    <el-dialog
      title="测试对话框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="testForm"
          ><el-form-item
            label="测试输入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能为空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

此时,是三级组件的通信,注意看ref参数的定义。也就是说,对于【添加】按钮所在的父组件来说,testDlg是它的儿子,testForm是它的孙子。

如果要实现testForm里面的输入框的表单验证条件结果的清除,【添加】按钮的事件中的代码应该这样写:

handleAddDialogOpen() {
      if (this.$refs.testDlg.$refs.testForm) {
          this.$refs.testDlg.$refs.testForm.clearValidate();
      }
      this.visible = true;
},

笔者正是犯了这个错误,没有意识到是三级通信,还是按照那篇博客那样的写法,导致清除不掉。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • element-ui | 第一次表单验证的结果,在第二次表单验证时仍然存在

    注意!!!!一定要加if (this.$refs.editForm),因为第一次打开是undefined,直接执行this.$refs.editForm.res...

    acoolgiser
  • 从0到1开发测试平台(十一)前端登录页面的编写及与后端登录接口的交互

    前面的文章已经把后台登录接口准备完毕,接下来就是前端页面的编写以及前后端交互了,这里前后端交互我们用的是axios。axios是通过promise实现对ajax...

    周辰晨
  • ElementUI 快速入门

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库指南 了解设计指南,帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产...

    py3study
  • 当前 GitHub 上排名前十的热门 Vue 项目

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地...

    疯狂的技术宅
  • 前端成神之路-vue前端项目01

    客户使用的业务服务:PC端,小程序,移动web,移动app 管理员使用的业务服务:PC后台管理端。 PC后台管理端的功能:管理用户账号(登录,退出,用户管理...

    海仔
  • 肝了几个月nuxt项目,想把这些实用知识点分享给你(干货)

    干了几个月的nuxt项目,差点没把自己给干翻。在公司没开干nuxt项目之前,我也没接触过nuxt,潦潦草草看了几眼官网就开干了,在这过程中也踩了不少坑,也写了不...

    winty
  • Vue使用Element实现增删改查+打包

    在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

    憧憬博客
  • 这个高仿小米商城项目,拿来学习再好不过了!

    今天推荐一个高仿电商项目小米商城,vue-store 作者还是学生,利用寒假做的,学生就这么牛逼哄哄,佩服佩服。

    乔戈里
  • 点亮你的Vue技术栈,万字Nuxt.js实践笔记来了

    作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮。

    WahFung

扫码关注云+社区

领取腾讯云代金券