@submit.prevent 不适用于 vue md-input

Question

当我点击 'login button' 即使我没有在 md-input 中填写数据它仍然运行, 我通过登录我的用户来测试我的 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>

在脚本方法中

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

您对 "prevent" 键的理解很不正确。它所做的只是在提交操作后不重新加载表单。但是，无论是否使用阻止，都会调用提交操作。它只是防止在每次提交后重新加载表单的默认功能。

另一方面，您需要做的是在实际提交之前验证您的表单。

示例：

//- 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>

@submit.prevent 不适用于 vue md-input

@submit.prevent not working on vue md-input

vue.js

authentication

vue-material