我正在尝试验证动态添加的输入字段。每当我只有一行输入要验证时,它就很好用。

工作案例示例:
javascript - Vee验证处理动态输入行-LMLPHP

但是,无论何时添加一行,验证都会同时验证第一行和添加的行-而不是单独验证每一行。这是有问题的情况。

问题案例示例:

javascript - Vee验证处理动态输入行-LMLPHP

The docs suggest giving a unique id for the :key,但是,即使添加了唯一的id字段,我也看到了问题。

这是我用于生成输入的代码

   <!-- Generate input fields and v-model -->
    <tr v-for="(row, rowIndex) in dataFields" :key="row.id">
      <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex">
        <!-- create first row and add valdiation -->
        <input
          type="text"
          class="input-style"
          v-model="dataFields[rowIndex][fieldName]"
          v-validate.initial="'required'"
          :name="fieldName"
        >
        <br>
        <span> errors.first(fieldName)}}</span>

这是问题的完整演示:
https://codesandbox.io/s/vue-template-rtjj9?fontsize=14

如何向每个动态添加的行添加验证?

最佳答案

您可以添加rowIndex来命名,以使其与众不同

<tr v-for="(row, rowIndex) in dataFields" :key="row.id">
  <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex">
    <!-- create first row and add valdiation -->
    <input
      type="text"
      class="input-style"
      v-model="dataFields[rowIndex][fieldName]"
      v-validate.initial="'required'"
      :name="fieldName + rowIndex"
      :data-vv-as="fieldName"
    >
    <br>
    <span @click="clicky()">{{errors.first(fieldName + rowIndex)}}</span>
  </td>
</tr>

请注意,您可以使用data-vv-as自定义验证消息中的名称字段。

Demo here

10-05 20:35
查看更多