How to create a dynamic form on vue.js?

How to create a dynamic form by adding fields ?

Actually trying to create a site with "admin" and LK.
The idea is to create a form with a configurable "fields" configuration(scheme in the figure).

5e0fb09ecea1f816344339.jpeg

As it should in theory work, the user loads the page the default blank form, and the button "add field group". By clicking the button generates a block of fields with titles and select. In selekt, the user selects the configuration that the user wants to work. After selecting config loaded block (nested within block groups fields). The added block fields parameter selected to become true and cannot be re-added to the form. Next, the user selects the following terms and konfigureret them.

config

data() {
 return {
 activeItem: 'params',
 conditions: [
{
 id: 1,
 title: 'Age of Respondent',
 ageRange: [],
 selected: false,
},
{
 id: 2,
 title: 'Type loyalty cards',
 body: {
 type: ['Gold', 'Silver', 'Platinum'],
},
 selected: false,
},
{
 id: 3,
 title: 'the Status of a loyalty card',
 body: {
 statys: ['Active', 'inactive', 'Blocked', 'Test data'],
},
 selected: false,
},
{
 id: 4,
 title: 'user Status',
 body: {
 statys: ['Active', 'inactive', 'Blocked', 'Check user data'],
},
 selected: false,
},
],
 colors: {
 aqua: '#7FDBFF',
 orange: '#FF851B',
 blue: '#0074D9',
 navy: '#001f3f',
 teal: '#39CCCC',
 green: '#2ECC40',
},
 fields: [],
};
}


Actually can tell who is faced with a similar task, but it is not clear how to implement it. Big request: do not send to Google(I was there). It would be nice to You tell in what side to dig and the right approach to the solution.
April 4th 20 at 00:42
0 answer

Find more questions by tags Vue.js