How to collect form data?

Question

Vue.js

Hello.
There is a form with a large number of different fields. Its simplified version https://jsfiddle.net/7f5Ltr2d/ Suppose the user has filled in the first field in each section (.form__section). How can I collect all the entered data along with the headers and display it on the page like this:

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

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

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

For each field, use v-model and manually create a property for them in data? How, in this case, to get data from text fields in the form of placeholder - value, for example? Also I don't know how to get the section title.

Answer 1

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

Answer 2

In data, create an array of objects, each of which will have a label, type, value.
And output them with a v-for loop.
v-model cling to value.
And by type you can display different fields. For example v-if="item.type === 'text'", then output text input.
v-if="item.type === 'select'", then select. And in the same object you can store options.