VueJS dynamic adding form components - vue.js

Question

I'm trying to make dynamic form, so if i want to add another text or some other field i can do it through web and save that to some json file.
Here is my code so far:
<template>
<div class="q-pa-md" style="max-width: 800px">
<div class="col-2">
<q-btn color="primary" label="Add Field" #click="addField = true"/>
</div>
<q-dialog v-model="addField">
<q-card>
<q-card-section>
<div class="text-h6">Add Field</div>
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
test
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn flat label="Add" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
<q-separator spaced inset />
<q-list>
<q-item>
<q-item-section>
<s-input v-model="data.email" label="Email" required />
<q-item-label caption lines="2">Email field.</q-item-label>
</q-item-section>
<q-item-section side top>
<div>
<q-toggle
v-model="data.active"
checked-icon="check"
color="blue"
unchecked-icon="clear"
/>
<q-icon name="keyboard_arrow_up" color="blue" size="md"/>
<q-icon name="keyboard_arrow_down" color="blue" size="md"/>
</div>
</q-item-section>
</q-item>
<q-separator spaced inset />
<q-item>
<q-item-section>
<s-input v-model="data.username" label="Username" required />
<q-item-label caption lines="2">Username field.</q-item-label>
</q-item-section>
<q-item-section side top>
<div>
<q-toggle
v-model="data.active"
checked-icon="check"
color="blue"
unchecked-icon="clear"
/>
<q-icon name="keyboard_arrow_up" color="blue" size="md"/>
<q-icon name="keyboard_arrow_down" color="blue" size="md"/>
</div>
</q-item-section>
</q-item>
<q-separator spaced inset />
<q-item>
<q-item-section>
<s-input v-model="data.password" label="Password" type="password" required />
<q-item-label caption lines="2">Password field.</q-item-label>
</q-item-section>
<q-item-section side top>
<div>
<q-toggle
v-model="data.active"
checked-icon="check"
color="blue"
unchecked-icon="clear"
/>
<q-icon name="keyboard_arrow_up" color="blue" size="md"/>
<q-icon name="keyboard_arrow_down" color="blue" size="md"/>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</template>
<script>
export default {
data () {
return {
newItem: true,
titleAction: null,
title: null,
titleHideEvent: false,
addField: false,
data: {
active: true
}
}
}
}
</script>
these are all field i have. Now if user wants to add another checkbox he should open dialog with button Add Field and choose that type of component and after he confirm that new chekcbox should be added in form. But i don't know how to make it dynamic. This 3 field should be mandatory and show in all forms (email, username and password).
Can anyone please help with some advice about this?

Answer 1

That's a huge template you got ^^"
Think that you can success by adding counters in your component's data.
Each time the User want to add a checkbox, you increment one of your counter depending on his choices. If the User wants to add a field for name for example, increment counterOfNameFields. In your template you can loop over these counters to display the right amount of fields.
Also, make a function that will push the content of these fields in arrays for example. You should have the same amount of arrays as counters.
Hope this answer your problem, tell me if it's not the case :)

Answer 2

You can have a list for added fields
data: function {
return {
...
addedItems:[],
...
}
}
And in your template
<q-item v-for="item in addedItems>
some html, which depends on how you define your items in your code
</q-item>
When you add an item to the page you just push it into
addedItems
collection and when you remove it from the page you remove it from collection.

Answer 3

I think this may be helpful https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
You can use v-bind:is="'yourComponentName'"
And you can store list of dynamic components and their options in some array.
Something like this (of course it's only example)
<component v-for="component in components" v-bind:is="component.name" v-bind:someoptions="component.options">
</component>