Vee Validate обрабатывает динамические строки ввода

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

Пример рабочего случая: Vee Validate обрабатывает динамические строки ввода

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

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

Vee Validate обрабатывает динамические строки ввода

Документы предлагают указать уникальный идентификатор для :key, однако, даже после добавления поля уникального идентификатора я вижу проблему.

Вот мой код для генерации входных данных

   <!-- 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

27.07.2019 06:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 064

Перейти к ответу Данный вопрос помечен как решенный

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

Демо здесь

27.07.2019 07:09