Javascript Vue表单验证

我的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>

我刚开始使用vue，所以如果是简单的修复，请不要评判我。 顺便说一句：如果没有验证，效果会很好，我相信这不仅仅是这些错误的问题，很可能我没有捕捉到需要的东西。 我做错了什么？

改变

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

---

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

您似乎只填充

错误

，而从不填充

验证

？您可以使用

vuelidate

进行表单验证。

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

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

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