Как собрать данные формы?

Question

[r_g_b_a]

Здравствуйте.
Есть форма с большим количеством различных полей. Ее упрощенный вариант https://jsfiddle.net/7f5Ltr2d/ Предположим, пользователь заполнил в каждой секции (.form__section) первое поле. Как мне собрать все введенные данные вместе с заголовками и вывести на странице в таком виде:

Текстовые поля
input 1 - тут значение value

Текстовые области
textarea 5 - тут значение value

Чекбокс
checkbox 3 - тут значение value

Для каждого поля использовать v-model и вручную для них создавать свойство в data? Как в этом случае с текстовых полей получить данные в виде placeholder - value, к примеру? Также я не знаю, как получить заголовок секции.

Answer 1

[Никита Егоров]

https://jsfiddle.net/yrjf2nsc/8/

Answer 2

[Дмитрий Шелыгин]

В data создай массив объектов, каждый из которых будет иметь label, type, value.
И выводи их циклом v-for.
v-model цепляй на value.
А по type можешь разные поля выводить. Например v-if="item.type === 'text'", тогда выводишь текстовый input.
v-if="item.type === 'select'", тогда select. И там же в объекте можешь хранить options.