Vue 表单验证

Question

我的 Vue 应用程序有一些问题。 我正在尝试验证与我的 Laravel 应用程序连接的登录表单。

这就是模板的样子

<template>
<div>
          <div class="main"  v-if="canLogin">
          <img class="logo" src="../assets/logo.png">
          <form id="app"
                @submit="checkForm"
                method="post">
                
            <p v-if="validation.length">
              <b>Please correct the following error(s):</b>
              <ul>
                <li v-for="validation in validation">{{ error }}</li>
              </ul>
            </p>

            <input class="form-input" type="email" v-model="form.email" id="email" align="center" placeholder="eMail" required>

            <input class="form-input" type="password" v-model="form.password" id="password"  align="center" placeholder="Password" required>

            <button @click.prevent="login" class="submit">Sign In</button>


          </form>
                     
    </div>


    <div class="main"  v-if="!canLogin">

      <span> YOU ARE BLOCKED FOR 15 MINUTES</span>
    </div>
</div>
</template>

如你所见，我想检查错误，但它总是给出错误

“验证”已定义但从未使用过

这就是我的脚本的样子。

<script>
import User from "../apis/User";

export default {
  data() {
    return {
      form: {
        email: "",
        password: ""
      },
        validation: [],
        errors: '',
        message: '',
        canLogin: true,
    };
  },

  mounted() {
        User.canLogin().then(response => {
          this.canLogin = response.data.canLogin;
        });
  },

  methods: {


    checkForm: function (e) {
      this.errors = [];

      if (!this.form.password) {
        this.errors.push("Name required.");
      }
      if (!this.form.email) {
        this.errors.push('Email required.');
      } else if (!this.validEmail(this.email)) {
        this.errors.push('Valid email required.');
      }

      if (!this.errors.length) {
        return true;
      }

      e.preventDefault();
    },
    validEmail: function (email) {
      var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    },


    login() {
      User.login(this.form)
        .then(response => {
          this.$store.commit("LOGIN", true);
          localStorage.setItem("token", response.data.token);
          this.$router.push({ name: "Dashboard" });

          this.$snotify.success(response.data.message, {
            timeout: 2000,
            showProgressBar: true,
            closeOnClick: true,
            pauseOnHover: true
          });

        })
        .catch(error => {
          if (error.response.status === 400) {
          this.errors = error.response.data.message;

          this.$snotify.error(error.response.data.message, {
            timeout: 2000,
            showProgressBar: true,
            closeOnClick: true,
            pauseOnHover: true
          });
          }

        if(error.response.status === 429){
          this.canLogin = false;
        }
        });
    }
  }
};
</script>

我正在捕捉一些东西，比如 canLogin，这是检查 IP 是否未被阻止。 还有一个错误，例如：

Elements in iteration expect to have 'v-bind:key' directives

我只是 vue 的初学者，所以不要评判我是否是简单的修复。 顺便说一句：没有验证可以正常工作，我相信这不仅是这些错误的问题，而且我可能没有根据需要捕获一些东西。 我在这里做错了什么？

Answer 1

改变

<ul>
   <li v-for="validation in validation">{{ error }}</li>
</ul>

收件人：

<ul>
   <li v-for="(error,index) in errors" v-bind:key="index">{{ error }}</li>
</ul>

在 vue 中，你必须为每个 v-for 循环提供一个键。

并将您的数据更改为：

data() {
 return {
   form: {
    email: "",
    password: ""
   },
   validation: [],
   errors: [],
   message: '',
   canLogin: true,
 };
},

我将你的错误变量设置为 arrayList。