ElementUI的表单验证失效，出现意想不到的问题

最新推荐文章于 2024-06-06 17:28:58 发布

Tvv1997

最新推荐文章于 2024-06-06 17:28:58 发布

阅读量2.6k

点赞数

分类专栏：网页前端 ElementUI 表单验证文章标签：网页前端 ElementUI 表单验证

本文链接：https://blog.csdn.net/Tvv1997/article/details/103433898

版权

在项目中遇到ElementUI表单验证失效的问题，表现为修改问卷时，标题值改变影响页面显示且验证错误。经过尝试一使用.vue.lazy未解决问题，尝试二通过新变量formData避免引用赋值仍出现验证异常。最终在尝试三中，通过点击修改后重新请求数据并赋值给formData，解决了验证问题。

摘要由CSDN通过智能技术生成

起因

项目中有一个心理测试模块，需要实现修改功能。
在这里插入图片描述

尝试一

页面渲染之前，created时，发送一个请求，拿到该测试问卷的基本信息（名称、简介、测试结果等），该值命名为testData。

created(){
   
   const data = {
   
   	params: {
   id: this.$route.query.id}
   	}
   this.apiGet('***/***/getQuestionById', data).then(res => {
   
   	this.testData = res.data[0]
  }
}

问题

点击修改问卷，让form表单里填充testData的值。这样bug就来了，我在form表单里修改testData.title的值的同时，页面左上角的title也跟着改变。因为左上角的值和input框里的值绑定的是同一个值，这时，如果我在input框里修改title的值，但是点击取消，不提交表单。按需求来说，该title是不应该被修改的，但是实际上被修改了。这时，用户只能通过刷新的方式，重新获取该问卷的基本信息。

解决

我想到可以用vue里的.lazy方式，让输入框里的值在修改的同时，左上角的值不会同时改变。但是一旦input框失去焦点，该值还是被改变了。所以这样也行不通。

尝试二

我重新申请一个变量formData，用来存放testData。此处一定要注意通过值引用赋值，不要把地址赋值过去了。在尝试一中，created时，获取到testData后，就给formData赋值。

created(){
   
   const data = {
   
   	params: {
   id: this.$route.query.id}
   	}
   this.apiGet('***/***/getQuestionById', data).then(res => {
   
   	this.testData = res.data[0]
   }
   this.testForm<