javascript - Vee Validate 处理动态输入行

Question

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

工作案例示例：

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

问题案例示例：

文档建议为 :key 提供一个唯一的 id，但是，即使在添加了一个唯一的 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

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

标签： javascriptvue.jsvuejs2vee-validate

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自定义验证消息中的名称字段。

演示在这里