如何使用element-ui重置特定的表单域

Question

我目前正在学习VueJS，我正在使用Element-UI框架。我想要的是，如果有一个验证错误，当提交登录表单时，我想清除密码字段。

根据Element-UI文档，该表单项有一个resetField方法，但我不知道如何以编程方式访问该表单项。这是我的表单代码。

<el-form
    ref="login"
    :model="login"
    :rules="loginRules"
    label-width="120px"
    label-position="top"
    v-if="pageMode == 'login'"
    @keydown.native="loginError = false"
    @submit.native.prevent="validateLogin('login')"
  >
    <el-form-item label="Email Address:" prop="email">
      <el-input v-model="login.email"></el-input>
    </el-form-item>
    <el-form-item label="Password:" prop="password">
      <el-input
        type="password"
        v-model="login.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item style="text-align:center;">
      <el-button native-type="submit" type="primary">Login</el-button>
      <el-button type="primary" @click="resetForms('login')"
        >RESET</el-button
      >
    </el-form-item>
  </el-form>

下面是我的loginUser函数

async validateLogin(formName) {
  try {
    let response = await this.$auth.loginWith("local", {
      data: this.login
    });
  } catch (err) {
    //handle error
    this.notiColor = "red";
    this.loginError = true;

    this.$refs[formName].password.resetField();  /// THIS DOES NOT WORK
  }
},

正如你所看到的，我试着使用this.$refs[formName].password.resetField()，但是它不起作用，我得到一个"Cannot read property 'resetField‘of undefined“。

任何帮助都将不胜感激。

问候

CES

Answer 1

如果您只想清空字段，直接访问字段会更容易：

this.password = null

如果要清除密码字段并重置密码字段的验证消息，请执行以下操作：

this.$refs[formName].fields.find((f) => f.prop == "password").resetField()