问题所在:
为了优化用户使用观感,减少Message
组件的使用。将后端返回的错误信息显示在表单中
解决方法:
- 用
div
实现效果。在每个form-item
下面加上div
,用来实现类似效果,例子省略了。 - 用
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
置为空,否则错误信息只会在第一次渲染成功,再次发送请求并不会渲染错误信息