关于用同一个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所在位置

<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>

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