如何使用 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() 但它没有用我收到“无法读取未定义的属性 'resetField'。

如有任何帮助，我们将不胜感激。

此致

消费电子展

Answer 1

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

this.password = null

如果你想清除密码字段并重置密码字段的验证消息是：

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

如何使用 element-ui 重置特定表单字段

How to reset a specific form field with element-ui

javascript

node.js

vue.js

element-ui