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

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

使用Vee-Validate（Vuejs）验证输入数组

1 个答案: