Vee Validate, обрабатывающая строки динамического ввода

Я пытаюсь проверить динамически добавленное поле ввода. Всякий раз, когда мне нужно проверить только одну строку входных данных, он отлично работает.

Пример рабочего случая: введите описание изображения здесь

Однако всякий раз, когда я добавляю строку, проверка проверяет как первую строку, так и добавленную строку - вместо проверки каждой строки по отдельности. Это проблемный случай.

Пример проблемного случая:

введите описание изображения здесь

В документации предлагается указать уникальный 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.

Как добавить проверку к каждой динамически добавляемой строке?


javascript vue.js vuejs2 vee-validate
person Edon    schedule 27.07.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете добавить 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 для настройки поля имени в сообщении проверки.

Демо здесь

person ittus    schedule 27.07.2019