美文网首页
element-ui表单验证如何显示后端返回错误信息

element-ui表单验证如何显示后端返回错误信息

作者: 别吵让我睡觉 | 来源:发表于2021-03-19 15:49 被阅读0次

问题所在:
为了优化用户使用观感,减少Message组件的使用。将后端返回的错误信息显示在表单中

解决方法:

  1. div实现效果。在每个form-item下面加上div,用来实现类似效果,例子省略了。
  2. el-form自带的属性error,很方便。
<el-form-item prop="email" icon="el-icon-user" :error="errorMsg">
     <el-input v-model="loginForm.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
    this.$axios.post("url/")
            .then(response => {
              // 这里很重要,必须要置为空
              this.errorMsg= ''
              if(response.data.code === 10000){
                 this.$nextTick(() => {
                  this.errorMsg = response.data.message
                })
              }
            })
            .catch(error => {
              console.log(error)
            });

需要注意的是:在去渲染后端返回的错误信息前,必须要将errorMsg置为空,否则错误信息只会在第一次渲染成功,再次发送请求并不会渲染错误信息

相关文章

网友评论

      本文标题:element-ui表单验证如何显示后端返回错误信息

      本文链接:https://www.haomeiwen.com/subject/mlbzqltx.html