[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-inputv-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-inputref="password"v-model="loginForm.password":type="passwordType"placeholder="密碼"name="password"tabindex="2"auto-complete="on"@keyup.enter.native="handleLogin"/></el-form-item>

記下教訓吧，卡了倆點。。。。。

總結

以上是生活随笔為你收集整理的关于用同一个Form写编辑和添加的VUE报错的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。