关于用同一个Form写编辑和添加的VUE报错

[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所在位置

将v-if写在了input中导致虽然密码框在修改界面没有显示，但是部分代码依旧执行，使得编辑报错。

如下为更改后

记下教训吧，卡了俩点。。。。。