Как создать динамические поля ввода vue3?

Для создания динамических полей ввода во Vue.js 3 можно использовать директиву v-for и реактивное свойство v-model в комбинации с массивом данных.

Начнем с создания массива данных в компоненте Vue, который будет содержать информацию о каждом поле ввода. Каждый элемент массива будет объектом с полями, такими как id (уникальный идентификатор), value (значение), type (тип поля ввода) и другими необходимыми параметрами.

data() {
  return {
    fields: [
      { id: 1, value: '', type: 'text' },
      { id: 2, value: '', type: 'text' },
      // добавьте остальные поля при необходимости
    ]
  };
},

Затем в разметке компонента мы можем использовать директиву v-for для отображения полей ввода на основе данных в массиве fields. Каждое поле должно иметь уникальный key, чтобы Vue могло эффективно отслеживать изменения и проводить перерисовку только необходимых элементов.

<div>
  <div v-for="field in fields" :key="field.id">
    <input v-model="field.value" :type="field.type">
  </div>
  <button @click="addField">Добавить поле</button>
</div>

В коде выше мы также добавили кнопку "Добавить поле", которая будет вызывать метод addField при клике. В этом методе мы можем добавить новый объект в массив fields:

methods: {
  addField() {
    const newField = { id: Date.now(), value: '', type: 'text' };
    this.fields.push(newField);
  }
}

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

Поле ввода будет связано с соответствующим объектом field в массиве данных через директиву v-model. Таким образом, любые изменения значения в поле ввода будут автоматически отражаться в связанном объекте field.

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