@ submit.prevent не работает на vue md-input

Question

когда я нажимаю кнопку входа в систему, даже если я не заполняю данные в md-вводе, который все еще работает, я проверяю свой метод onSubmit () по логину с моим пользователем, и он работает! Я не думаю, что я делаю что-то неправильно в методе, поэтому я предполагаю, что моя форма неверна. вот мой код:

моя форма

 <form @submit.prevent="onSubmit">
    <login-card header-color="green">
      <h4 slot="title" class="title">CCRP Sign On</h4>
      <p slot="description" class="description">IT solution by เจ้เก๋ IT-PM</p>
      <md-field class="md-form-group" slot="inputs">
        <md-icon>account_box</md-icon>
        <label>ID...</label>
        <md-input v-model.trim="userId" type="text"></md-input>
      </md-field>
      <md-field class="md-form-group" slot="inputs">
        <md-icon>lock_outline</md-icon>
        <label>Password...</label>
        <md-input v-model.trim="password" type="password"></md-input>
      </md-field>
      <md-field class="md-form-group">
        <md-icon>announcement</md-icon>
        <label>Password...</label>
      </md-field>
      <md-button slot="footer" class="md-simple md-success md-lg" type="submit">Login</md-button>
    </login-card>
  </form>

в методах scrpit

async onSubmit() {
      const authData = {
        userId: this.userId,
        password: this.password
      };
      await this.login(authData).then(() => {
        if (this.isAuthenticated) {
          this.$router.push("dashboard");
        } else {
          console.log("err");
        }
      });
    },

Вы можете мне помочь решить это?

Answer 1

Ваше понимание ключа "предотвращать" совершенно неверно. Все, что он делает, это не перезагружает форму после отправки действия. Однако действие отправки будет вызвано независимо от того, используется ли предупреждение или нет. Это просто предотвращает перезагрузку формы по умолчанию после каждой отправки.

С другой стороны, вам нужно проверить свою форму перед ее отправкой.

Пример:

//- Requires "vuelidate" - npm install vuelidate
<script>

import { validationMixin } from "vuelidate";
import { required, email } from "vuelidate/lib/validators";

export default {
  name: "FormValidation",
  mixins: [validationMixin],
  data: () => ({
    form: {
      email: null,
      password: null
    },
    userSaved: false,
    sending: false,
    lastUser: null
  }),
  validations: {
    form: {
      email: {
        required,
        email
      },
      password: {
        required
      }
    }
  },
  methods: {
    getValidationClass(fieldName) {
      const field = this.$v.form[fieldName];

      if (field) {
        return {
          "md-invalid": field.$invalid && field.$dirty
        };
      }
    },
    clearForm() {
      this.$v.$reset();
      this.form.email = null;
      this.form.password = null;
    },
    saveUser() {
      this.sending = true;

      // Instead of this timeout, here you can call your API
      window.setTimeout(() => {
        this.lastUser = `${this.form.email}`;
        this.userSaved = true;
        this.sending = false;
        this.clearForm();
      }, 1500);
    },
    validateUser() {
      this.$v.$touch();

      if (!this.$v.$invalid) {
        this.saveUser();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.md-progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
</style>

<template>
  <div>
  <!-- Calling validateUser insted of submit action -->
    <form novalidate class="md-layout" @submit.prevent="validateUser">
      <md-card class="md-layout-item md-size-50 md-small-size-100">
        <!-- Title of the form -->
        <md-card-header>
          <div class="md-title">Login</div>
        </md-card-header>

      <!-- Inputs for the form -->
        <md-card-content>
          <md-field :class="getValidationClass('email')">
            <label for="email">Email</label>
            <md-input
              type="email"
              name="email"
              id="email"
              autocomplete="email"
              v-model="form.email"
              :disabled="sending"
            />
            <span class="md-error" v-if="!$v.form.email.required">The email is required</span>
            <span class="md-error" v-else-if="!$v.form.email.email">Invalid email</span>
          </md-field>

          <md-field :class="getValidationClass('password')">
            <label for="password">Password</label>
            <md-input
              type="password"
              name="password"
              id="password"
              autocomplete="password"
              v-model="form.password"
              :disabled="sending"
            />
          <!-- to show errors in case validation fails -->
            <span class="md-error" v-if="!$v.form.password.required">The email is required</span>
            <span class="md-error" v-else-if="!$v.form.email.email">Invalid email</span>
          </md-field>
        </md-card-content>

        <md-progress-bar md-mode="indeterminate" v-if="sending"/>

        <md-card-actions>
          <md-button type="submit" class="md-primary" :disabled="sending">Create user</md-button>
        </md-card-actions>
      </md-card>

      <md-snackbar :md-active.sync="userSaved">The user {{ lastUser }} was saved with success!</md-snackbar>
    </form>
  </div>
</template>