Vue.js и Composition API: Vue.js — это прогрессивная среда JavaScript, известная своей простотой и гибкостью. С появлением Composition API в Vue 3 разработчики получили мощный набор инструментов для организации логики компонентов и управления состоянием. Мы будем использовать этот API для создания компонента динамической формы.

Понимание шаблона: шаблон нашего компонента начинается с контейнера <div>. Внутри мы используем тег <pre> для отображения содержимого объекта formData. Выражение {{ formData }} демонстрирует реактивный характер Vue.js, поскольку любые изменения данных формы будут автоматически отражены в пользовательском интерфейсе.

Динамическое добавление элементов: чтобы пользователи могли динамически добавлять элементы, мы включили кнопку «Добавить». Директива кнопки @click запускает встроенную функцию, которая помещает пустой объект в массив formData.multiples. Каждый объект представляет элемент в нашей форме. Добавляя объекты в этот массив, пользователи могут динамически добавлять дополнительные элементы формы, просто нажимая кнопку.

Перебор элементов формы: используя директиву v-for, мы перебираем массив formData.multiples. Для каждого элемента создается элемент <div>. В рамках этой итерации мы предоставляем поля ввода для свойств id, name и email каждого элемента. Директива v-model устанавливает двустороннюю привязку, гарантируя, что любые изменения, внесенные в поля ввода, будут синхронизированы с соответствующим элементом в объекте formData.

Удаление элементов формы. Чтобы разрешить удаление элементов, мы включаем кнопку «-» в каждую итерацию элемента формы. При нажатии на кнопку активируется функция remove. Эта функция принимает индекс элемента в качестве параметра и использует метод splice для его удаления из массива formData.multiples. С помощью этой функции пользователи могут легко и без проблем удалять ненужные элементы формы.

Дополнительное поле формы. Чтобы продемонстрировать гибкость нашего динамического компонента формы, мы включили дополнительное поле ввода для свойства username вне итерации элемента формы. Это демонстрирует, как компонент может беспрепятственно обрабатывать как повторяющиеся элементы формы, так и отдельные поля.

Заключение. В этой статье мы рассмотрели, как использовать Vue.js и Composition API для создания компонента динамической формы. Используя систему реактивности Vue.js, мы получили отзывчивую и интерактивную форму, которая позволяет пользователям легко добавлять и удалять элементы. Composition API помог нам организовать логику компонента по модульному принципу, сделав наш код более читабельным и удобным в сопровождении.

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

<template>
  <div class="">
    <pre>
  {{ formData }}
</pre
    >

    <button @click="addMore">Add</button>
    <div class="" v-for="(item, i) in formData.multiples" :key="i">
      <input v-model="item.id" placeholder="id" />
      <input v-model="item.name" placeholder="name" />
      <input v-model="item.email" placeholder="email" />
      <button @click="remove(i)" style="margin-lef: 10px">-</button>
    </div>
    <div class="">
      <input v-model="formData.username" placeholder="username" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const formData = ref({
  multiples: [],
});

const remove = (i) => {
  formData.value.multiples.splice(i, 1);
};
const addMore = () => {
  formData.value.multiples.push({});
};
</script>


<style >
button,
input {
  margin: 10px;
}
</style>

Выполнив шаги, описанные в этой статье, вы получите знания для создания компонента динамической формы с использованием Vue.js и Composition API. Этот компонент позволяет пользователям добавлять и удалять элементы формы на лету, сохраняя при этом реактивный и интуитивно понятный пользовательский интерфейс.