Динамические формы

Динамические формы представляют собой формы, структура которых может изменяться во время выполнения приложения. Они особенно полезны, когда необходимо создавать интерфейсы с переменным количеством полей, поддержкой сложной валидации или условным отображением элементов формы. Vue.js предоставляет удобные средства для построения таких форм за счёт реактивности, директив и компонентов.

Реактивные данные для формы

Форма строится на основе реактивного объекта data, где каждое поле формы описывается свойством объекта. Для динамических форм чаще всего используется массив объектов, каждый элемент которого представляет отдельное поле:

data() {
  return {
    fields: [
      { id: 1, type: 'text', label: 'Имя', value: '', required: true },
      { id: 2, type: 'email', label: 'Email', value: '', required: true },
    ]
  }
}

Здесь fields содержит описание каждого поля: его тип, метку, значение и необходимость заполнения. Такая структура позволяет добавлять, удалять или изменять поля на лету.

Генерация формы через v-for

Для рендеринга динамических полей используется директива v-for. Она перебирает массив полей и создаёт соответствующие элементы формы:

<form @submit.prevent="handleSubmit">
  <div v-for="field in fields" :key="field.id">
    <label :for="'field-' + field.id">{{ field.label }}</label>
    <input
      v-if="field.type === 'text' || field.type === 'email'"
      :type="field.type"
      v-model="field.value"
      :id="'field-' + field.id"
      :required="field.required"
    >
  </div>
  <button type="submit">Отправить</button>
</form>
  • v-model связывает значение поля с реактивным состоянием.
  • v-if позволяет рендерить элементы в зависимости от типа поля.
  • :key обеспечивает корректное обновление виртуального DOM при изменении массива.

Управление динамическими полями

Добавление и удаление полей выполняется через методы компонента:

methods: {
  addField(type = 'text') {
    const newField = {
      id: Date.now(),
      type,
      label: 'Новое поле',
      value: '',
      required: false
    };
    this.fields.push(newField);
  },
  removeField(id) {
    this.fields = this.fields.filter(field => field.id !== id);
  }
}

Использование уникального id обеспечивает корректное управление конкретными полями. Методы можно привязать к кнопкам интерфейса:

<button type="button" @click="addField()">Добавить поле</button>
<button type="button" @click="removeField(field.id)">Удалить</button>

Динамическая валидация

Валидация форм в Vue.js реализуется через проверку значений реактивного состояния. Для динамических форм удобно использовать вычисляемые свойства:

computed: {
  isFormValid() {
    return this.fields.every(field => {
      if (field.required) {
        return field.value.trim() !== '';
      }
      return true;
    });
  }
}

Кнопка отправки формы может блокироваться при некорректных данных:

<button type="submit" :disabled="!isFormValid">Отправить</button>

Работа с различными типами полей

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

components: {
  FormField: {
    props: ['field'],
    template: `
      <div>
        <label :for="'field-' + field.id">{{ field.label }}</label>
        <input
          v-if="field.type === 'text' || field.type === 'email'"
          :type="field.type"
          v-model="field.value"
          :id="'field-' + field.id"
        >
        <select v-else-if="field.type === 'select'" v-model="field.value">
          <option v-for="option in field.options" :value="option">{{ option }}</option>
        </select>
        <input v-else-if="field.type === 'checkbox'" type="checkbox" v-model="field.value">
      </div>
    `
  }
}

В основном компоненте можно рендерить все поля через этот компонент:

<FormField v-for="field in fields" :key="field.id" :field="field" />

Динамические формы и события

Vue.js позволяет реагировать на изменения формы через watch:

watch: {
  fields: {
    deep: true,
    handler(newFields) {
      console.log('Форма изменилась', newFields);
    }
  }
}

Такое наблюдение полезно для сохранения черновиков, автоматической валидации или обновления других частей интерфейса.

Масштабирование форм

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

<PersonalInfoBlock :fields="personalFields" />
<ContactBlock :fields="contactFields" />

Каждый блок поддерживает локальные методы добавления и удаления полей, сохраняя глобальную реактивность через v-model или события @update.

Итоговые принципы работы с динамическими формами

  • Массив объектов — базовая структура для полей.
  • v-for и v-model — ключевые инструменты для рендеринга и связывания данных.
  • Компоненты для полей — упрощают работу с разными типами данных.
  • Методы для управления — добавление и удаление полей через реактивное состояние.
  • Вычисляемые свойства и watch — динамическая валидация и отслеживание изменений.
  • Разделение на блоки — облегчает поддержку крупных форм и повторное использование компонентов.
Оглавление