element UI跳转当前页面,表单校验失效

问题场景

详情页有个编辑按钮,点击进入编辑页,由于详情页和编辑页是同一个页面,只是后面通过type参数来进行区分(detail和edit),这样就是导致路径未变,只是参数变化了。详情页的数据只是展示,编辑页则是换成了表单,但是表单元素的blur和change的校验失效,点击提交时,表单校验还是生效的。

解决方案

给表单绑定一个动态的key值,详情页的key设置为detail,编辑页的key设置为edit,此问题即可解决。
例如:

<el-form :key="formKey" ></el-form>
......
computed: {
   formKey() { 
      return this.$route.params.type; 
  }
}

type是路由上配置的参数,进行详情页和编辑页区分的,当然,只要能动态给表单绑定key,即可解决。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容