下面是一篇踩坑文章 报错描述：点击登录按钮，账号密码正确的情况下，能够成功登录，但是控制台一直报红。
报错如图
解决办法
解决思路： 1.审查代码：首先审查login.vue这个文件的代码有没有写错，通篇看下来代码比较正常，方法都是对的。 2.查百度：百度我查到的是要捕获异常，但是后台接口里面并没有返回error。 3.一步一步查细节：整体代码看不出来什么逻辑异常问题，查细节比如验证规则，还有username写成name，最后发现的问题来源是本应该写的validateField写成了validate，以为用validate验证一个字段也没错，结果是validate只能验证表单，单独字段要用validateField。
-----------------------真的是万万没有加想到----------------------
代码语言：javascript复制 handleNameChange(val) {
this.loginForm.username = val;
this.$refs.loginForm.validateField("username");//此处写成了validate,
},
handlePwdChange(val) {
this.loginForm.password = val;
this.$refs.loginForm.validateField("password");
},回顾element的input验证方法
贴上源代码
代码语言：javascript复制<template>
<div class="login-container">
<div class="login-box">
<div class="login-icon">
<Icon
customStyle="width: 100%; height: 100%"
link="icon-login-pic"
:pointer="false"
></Icon>
</div>
<div class="login-form">
<div class="login-content">
<h2>{{ $t("lang.wmsTitle") }}</h2>
<el-form ref="loginForm" :model="loginForm" :rules="rulesForm">
<el-form-item label="" prop="username">
<Input
tabindex="1"
icon="icon-zhanghao"
iconActive="icon-zhanghao-copy"
:value="loginForm.username"
:placeholder="$t('lang.enterName')"
@change="handleNameChange"
autocomplete="off"
></Input>
</el-form-item>
<el-form-item label="" prop="password">
<Input
tabindex="2"
icon="icon-mima"
iconActive="icon-mima-copy"
:value="loginForm.password"
type="password"
:placeholder="$t('lang.enterPwd')"
@change="handlePwdChange"
autocomplete="off"
></Input>
</el-form-item>
</el-form>
<el-button
class="login-btn"
type="primary"
:disabled="loginDisable"
:loading="logining"
@click="judgeLogin('loginForm')"
@keyup.enter="judgeLogin('loginForm')"
>
{{ $t("lang.login") }}
</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "login",
data() {
const loginForm = {
username: "",
password: "",
code: "",
uuid: ""
};
const rulesForm = {
username: [
{ required: true, message: this.$t("lang.enterName"), trigger: "blur" }
],
password: [
{ required: true, message: this.$t("lang.enterPwd"), trigger: "blur" }
]
};
return {
loginForm,
rulesForm,
imgSrc: "/captcha",
logining: false,
// codeUrl: ''
};
},
computed: {
loginDisable() {
return !(this.loginForm.username && this.loginForm.password);
}
},
created() {
document.addEventListener("keypress", this.handleKeyLogin);
},
mounted() {
// this.$refs.loginForm.clearValidate()
},
beforeDestroy() {
document.removeEventListener("keypress", this.handleKeyLogin);
},
methods: {
// getCode () {
// this.$api.account.getCodeImg().then(res => {
// // this.codeUrl = "data:image/gif;base64," res.data.img;
// this.loginForm.uuid = res.data.uuid;
// });
// },
handleNameChange(val) {
this.loginForm.username = val;
this.$refs.loginForm.validateField("username");
},
handlePwdChange(val) {
this.loginForm.password = val;
this.$refs.loginForm.validateField("password");
},
handleKeyLogin(event) {
var keycode = event.key;
if (keycode === "Enter") {
this.judgeLogin("loginForm"); // 登录方法名
return false;
}
},
judgeLogin(formName) {
if (this.logining) return;
this.$refs[formName].validate(valid => {
if (valid) {
this.loginHandle();
} else {
this.doAlert("Error submit! Please check the input.", "Warn");
return false;
}
});
},
loginHandle() {
this.logining = true;
this.$store
.dispatch("Login", this.loginForm)
.then(({ code, msg }) => {
if (code !== 0) {
this.$message({
message: msg,
type: "error"
});
} else {
this.$message({
message: msg,
type: "success"
});
}
this.logining = false;
this.$router.push({ path: this.redirect || "/warehouseList" });
})
.catch(
() => {
this.logining = false;
}
);
},
doAlert(content, title) {
this.$alert(content, title, {
confirmButtonText: "confirm"
});
}
}
};
</script>
<style scoped lang="scss">
.login-container {
display: flex;
min-width: 900px;
min-height: 380px;
height: 100%;
width: 100%;
background: #2b465b;
justify-content: center;
align-items: center;
.login-box {
display: flex;
width: 60%;
height: 60%;
min-width: 900px;
min-height: 380px;
justify-content: center;
align-items: center;
}
.login-icon {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
background: #459aa4;
.svg-div {
width: 76%;
height: 100%;
}
}
.login-form {
display: flex;
width: 50%;
height: 100%;
background: white;
justify-content: center;
align-items: center;
.login-content {
width: 60%;
}
h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 48px;
width: 100%;
text-align: center;
}
::v-deep .el-input .el-input__inner {
height: 40px;
line-height: 40px;
background-color: #fff;
padding-left: 32px;
}
::v-deep .el-form-item {
margin-bottom: 30px;
}
.login-btn {
width: 100%;
}
}
}
</style>总结
所以写代码在细节的地方真的要非常的注重！并且一个问题超过了一个小时还想不出来的话，我建议赶紧问有经验的同事，这个是真的，别人半个小时就能够给你解决。 在团队中，某一个人没有跟上来其实也会导致项目的交付，千万不要因为自己的没有经验或者不会解决这类问题而不敢问，拖慢了整个团队项目进度的后腿，这是禁忌！
