时间戳

首页 > 解决方案 > 使用 Vee-Validate (Vuejs) 验证输入数组

vue.js - 使用 Vee-Validate (Vuejs) 验证输入数组

问题描述

以下作品：

 <li :key="index" v-for="(...) in items">
    <input type="text" name="itemFields[]" v-validate="required">
 </li>

 // ...

<div class="vv-errors">
    <ul>
        // shows only for last active input
        <li v-for="error in errors.collect('itemFields[]')">{{ error }}</li>
    </ul>
</div>

如果我将某些输入设为空，则会显示一条错误消息。但是，如果我随后用文本填充其他一些空输入，则错误消息会完全消失。情况不应该如此，因为另一个输入仍然是空的。总而言之，错误消息仅考虑最后一个活动输入。

如果至少有一个输入为空，如何实现显示错误消息？

标签： vue.jsvee-validate

解决方案

实际上，您面临的问题是因为您的所有输入的名称字段都是相同的，并且应该是唯一的。因此，在使用 v-for 时，您可以执行以下操作：

 <div  v-for="i in 5" >
   <input type="text" :name="'email'+i" placeholder="Email" v-validate="'required|email'">
   <span class="error" v-if="errors.has('email'+i)">{{errors.first('email'+i)}} 
   </span>
  </div>

这是解决您的问题的基本示例。

推荐阅读