@aleksspectr
веб-программист, изучаю серверы и железо

Как создать динамическую форму на vue.js?

Как создать динамическую форму с добавлением полей ?

Собственно пробую создать сайт с "админкой" и ЛК.
Идея создать форму с конфигурируемыми "полями" настроек(схема на рисунке).

5e0fb09ecea1f816344339.jpeg

Как это должно в теории работать, пользователь загружает страницу в которой по умолчанию пустая форма и кнопка "добавить группу полей". По нажатию на кнопку генерируется блок полей, с тайтлом и селектом. В селекте пользователь выбирает конфиг, с которым пользователь хочет работать. После выбора конфига подгружается блок настроек (вложенный в блок группы полей). У добавленного блока полей параметр selected становиться true и не может быть снова добавлен в форму. Далее пользователь выбирает следующие условия и конфигурирает их.

конфиг

data() {
    return {
      activeItem: 'params',
      conditions: [
        {
          id: 1,
          title: 'Возраст респондента',
          ageRange: [],
          selected: false,
        },
        {
          id: 2,
          title: 'Тип карты лояльности',
          body: {
            type: ['Gold', 'Silver', 'Platinum'],
          },
          selected: false,
        },
        {
          id: 3,
          title: 'Статус карты лояльности',
          body: {
            statys: ['Активна', 'Не активна', 'Заблокирована', 'Проверка данных'],
          },
          selected: false,
        },
        {
          id: 4,
          title: 'Статус пользователя',
          body: {
            statys: ['Активен', 'Не активен', 'Заблокирован', 'Проверка данных пользователя'],
          },
          selected: false,
        },
      ],
      colors: {
        aqua: '#7FDBFF',
        orange: '#FF851B',
        blue: '#0074D9',
        navy: '#001f3f',
        teal: '#39CCCC',
        green: '#2ECC40',
      },
      fields: [],
    };
}


Собственно может подсказать, кто сталкивался с подобными задачами, задача интересная но не очень понятно как ее реализовать. Большая просьба: не отправляйте в гугл(я там был). Было бы здорово чтобы Вы подсказали в какую сторону копать и правильный подход к решению.
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы