Vue.js使用vee-validate验证动态输入字段时错误全量显示问题求解

vee-validate默认通过name属性作为校验字段的唯一标识，所有动态生成的输入框name均为fairPaid时，框架会将其识别为同一个校验字段，因此任意字段校验失败都会触发所有同name字段的错误提示。

使用vee-validate内置的data-vv-scope属性为每个循环生成的字段分配独立的校验作用域，即可实现同name字段的校验隔离，完全不需要改动name属性值，修改后的模板代码如下：

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

实现逻辑 #

data-vv-scope会为当前字段指定专属的校验命名空间，相同name但不同scope的字段会被vee-validate识别为独立的校验对象，错误信息会按scope独立存储，不会互相影响，完全满足你不修改name属性的需求。

如果你的vee-validate版本不支持data-vv-scope参数，可以给每个input额外加自定义属性存原始name值，校验用带索引的name，提交表单时读取自定义属性即可保留原有业务逻辑：

<input 
  v-validate="'required'" 
  :name="`fairPaid_${k}`"
  data-original-name="fairPaid"
  type="text" 
  :class="['form-control', {'is-invalid': errors.has(`fairPaid_${k}`)}]" 
  v-model="input.fairPaid"
>

内容的提问来源于stack exchange，提问作者user3653474