[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'trim')"
userSubmit() {
// this.$refs.forms.submit();
this.$refs.forms.$refs.loginForm.validate((valid) => {
if (valid) {
if (this.title == "添加用户") {
addUser(this.loginForm).then((res) => {
console.log(res, "add");
this.$message({
type: "success",
message: "添加成功",
});
this.getUserList();
});
} else {
let { id, mobile, email } = this.loginForm;
console.log(this.loginForm);
editorUser(id, { mobile, email }).then((res) => {
console.log(res, "update");
this.$message({
type: "success",
message: "修改成功",
});
this.getUserList();
});
}
this.userVisible = false;
} else {
console.log("error submit!!");
return false;
}
});
},
代码都写在了index文件中,但是在执行编辑的时候却报了trim的问题,trim用在了添加里面的验证,后来一点点查错才发现是v-if加错了地方。
如下为原来的v-if所在位置
<el-form-item prop="password">
<el-input
v-if="isAdd"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
将v-if写在了input中导致虽然密码框在修改界面没有显示,但是部分代码依旧执行,使得编辑报错。
如下为更改后
<el-form-item prop="password" v-if="isAdd">
<el-input
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
记下教训吧,卡了俩点。。。。。