Как сбросить определенное поле формы с элементом пользовательского интерфейса


Как сбросить определенное поле формы с элементом пользовательского интерфейса

17.10.2020 04:18:15 Просмотров 4 Источник

Я в настоящее время обучение VueJS и я использую элемент-платформа пользовательского интерфейса. Что я хотел бы, так это то, что если при отправке формы входа возникает ошибка проверки, я хочу очистить поле пароля.

Согласно нагревательный элемент пользовательского интерфейса документации форме-элемент имеет способ 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' undefined.

Любая помощь будет очень признательна.

С уважением

CES

У вопроса есть решение - Посмотреть?

Ответы - Как сбросить определенное поле формы с элементом пользовательского интерфейса / How to reset a specific form field with element-ui

Является ответом!
dreijntjens

17.10.2020 12:41:38

Если вы просто хотите очистить поле, то проще получить доступ к полю напрямую:

this.password = null

Если вы хотите очистить поле пароля и сбросить сообщение проверки поля пароля, то это:

this.$refs[formName].fields.find((f) => f.prop == "password").resetField()
Помочь в развитии проекта:
Закрыть X