如何使用element-ui

问题描述

我目前正在学习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'。

任何帮助将不胜感激。

致谢

CES

解决方法

如果您只想清空该字段，则可以更轻松地直接访问该字段：

for(int i=0; i < tbl.GetLength(0); i++)
{

}

如果您想清除密码字段并重置密码字段的验证消息，则为：

this.password = null

javascript vue.js