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

Question

以下是工作原理：

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

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

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

Answer 1

实际上，您面临的问题是因为所有输入的name字段都是相同的，应该是唯一的。因此，在使用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>

这是一个基本的example来解决你的问题。