Vee Validate 处理动态输入行答案

【问题标题】：Vee Validate handling dynamic input rowsVee Validate 处理动态输入行
【发布时间】：2019-07-27 04:50:20
【问题描述】：

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

工作案例示例：

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

问题案例示例：

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vee-validate

【解决方案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

【讨论】：