Работа с динамическими массивами (Validation Field Array)

Кейс использования

ValidationFieldArray используется в случаях, когда необходимо как-то модифицировать непосредственно сам массив. Например: Добавить, удалить, переместить поле массива

DANGER

ValidationFieldArray не поддерживает массив плоских полей, каждое поле массива должно быть объектом

<script lang="ts">
import { defineComponent } from 'vue';
import { ValidationField, ValidationFieldArray, ValidationProvider } from 'vue-validate-form';

export default defineComponent({
  components: { ValidationProvider, ValidationField, ValidationFieldArray },
  methods: {
    onSubmit(values) {
      // values хранит следующую структуру
      // items[{ id: 'значение из поля', firstName: 'значение из поля', lastName: 'значение из поля' }]
      // обработка данных формы
    },
  },
});
</script>

<template>
  <ValidationProvider @submit="onSubmit">
    <template #default="{ handleSubmit }">
      <form
        novalidate
        @submit.prevent="handleSubmit"
      >
        <ValidationFieldArray name="items">
          <template #default="{ name, fields, append, remove }">
            <div
              v-for="(field, index) in fields"
              :key="field.id"
            >
              <ValidationField :name="`${name}.${index}.id`">
                <template #default="{ modelValue, onChange }">
                  <input
                    :value="modelValue"
                    type="text"
                    @input="onChange($event.target.value)"
                  >
                </template>
              </ValidationField>

              <ValidationField :name="`${name}.${index}.firstName`">
                <template #default="{ modelValue, onChange }">
                  <input
                    :value="modelValue"
                    type="text"
                    @input="onChange($event.target.value)"
                  >
                </template>
              </ValidationField>

              <ValidationField :name="`${name}.${index}.lastName`">
                <template #default="{ modelValue, onChange }">
                  <input
                    :value="modelValue"
                    type="text"
                    @input="onChange($event.target.value)"
                  >
                </template>
              </ValidationField>

              <button
                type="button"
                @click="remove(index, { field: 'firstName', index: 0 })"
              >
                Удалить
              </button>
            </div>

            <button
              type="button"
              @click="append({
                firstName: 'Заполните имя',
                lastName: 'Заполните фамилию',
              }, { field: 'firstName' })"
            >
              Добавить
            </button>
          </template>
        </ValidationFieldArray>
      </form>
    </template>
  </ValidationProvider>
</template>

ValidationFieldArray предоставляет методы работы с массивом, такие как: Полное обновление(onChange), добавление вначало(prepend)/конец(append)/по индексу(insert), перемещение(move), свап(swap), удаление(remove) элементов. Более подробное описание методов можно найти здесь

Ключевое поле (keyName)

Для корректной работы ValidationFieldArray обязательно должно быть зарегистировано это поле с помощью ValidationField, по-умолчанию используется поле id, но может быть изменено параметром keyName

DANGER

При обходе fields обязательно указывать key со значением из поля переданного в keyName

При использовании методов массива не обязательно передавать keyName, если он будет опущен, то сгенерируется автоматически

Обработка фокуса

При работе с методами ValidationFieldArray, можно настроить поведение фокуса при вызове методов массива. При вызове метода, передайте объект focusOptions в качестве последнего аргумента.

interface FocusOptions {
  field: string; // Указывает на имя поля, которое нужно поместить в фокус
  index?: number; // Указывает на индекс поля, которое нужно поместить в фокус
}

Index поле не обязательное, для каждой функции есть стандартное поведение при незаданном index:

• append - фокус на добавленное (последнее) поле
• prepend - фокус на добавленное (первое) поле
• insert - фокус на добавленное (указанное) поле
• move - фокус на перемещённое (to) поле
• swap - фокус на перемещённое (to) поле
• remove - фокус на предыдущее удалённому полю (если нет предыдущего то на первое)