問題所在:
為了優(yōu)化用戶使用觀感勤庐,減少Message
組件的使用款青。將后端返回的錯誤信息顯示在表單中
解決方法:
- 用
div
實(shí)現(xiàn)效果恬试。在每個form-item
下面加上div
嵌屎,用來實(shí)現(xiàn)類似效果,例子省略了顿颅。 - 用
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
置為空斩跌,否則錯誤信息只會在第一次渲染成功,再次發(fā)送請求并不會渲染錯誤信息