Vee Validate 处理动态输入行

Question

我正在尝试验证动态添加的输入字段。每当我只有一排输入要验证时，效果很好。

工作案例：

但是，每当我添加一行时，验证都会验证第一行和添加的行 - 而不是单独验证每一行。这是问题案例。

问题案例:

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

如何为每个动态添加的行添加验证？

Answer 1

您可以在名称中添加 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

Vee Validate 处理动态输入行

Vee Validate handling dynamic input rows

javascript

vue.js

vuejs2

vee-validate