无法使用 vee-validate 验证 vue.js 中的动态输入字段

Question

我正在我的 vue 组件页面上动态生成一些输入字段，如下面的代码所示：

脚本部分：

    data(){
        return {
          forminputs: [
          {
            fairPaid: '',
           }
          ],
}

组件：

<tr v-for="(input,k) in forminputs" :key="k">
<td>
<input v-validate="'required'" name="fairPaid" type="text" :class="['form-control', {'is-invalid': errors.has('fairPaid')}]" v-model="input.fairPaid"> 
        <div v-show="errors.has('fairPaid')" class="invalid-feedback">
                 {{ errors.first('fairPaid') }}
        </div>
</td>
</tr>

正在验证字段，但如果错误出现在一个输入字段上但错误消息显示在所有输入字段中，则会出现一个问题。错误消息应该出现在发生错误的字段上，我不想更改字段名称。任何建议将不胜感激

Answer 1

错误与input 的name 属性相关联，因此它们应该是唯一的。不只是'fairPaid'，而是将'fairPaid' + k（以v-for 的k 索引作为后缀）绑定到name，并将其用作errors 包中的键：

<tr v-for="(input,k) in forminputs" :key="k">
  <td>
    <input v-validate="'required'" :name="`fairPaid${k}`" type="text" :class="['form-control', {'is-invalid': errors.has(`fairPaid${k}`)}]" v-model="input.fairPaid"> 
      <div v-show="errors.has(`fairPaid${k}`)" class="invalid-feedback">
          {{ errors.first(`fairPaid${k}`) }}
      </div>
  </td>
</tr>