Looking to develop a user-friendly form builder using Vue, where users can easily add different form fields by clicking buttons from a menu. If I only had one type of form field to add, it could be done like this (https://jsfiddle.net/u6j1uc3u/32/):
<div id="app">
<form-input v-for="field in fields"></form-input>
<button type="button" v-on:click="addFormElement()">Add Form Element</button>
</div>
<script type="x-template" id="form-input">
<div>
<label>Text</label>
<input type="text" />
</div>
</script>
In this case:
Vue.component('form-input', {
template: '#form-input'
});
new Vue({
el: '#app',
data: {
fields: [],
count: 0
},
methods: {
addFormElement: function() {
this.fields.push({type: 'text', placeholder: 'Textbox ' + (++this.count)});
}
}
})
However, what if there are multiple types of form fields (input, file, select, etc.)? One approach could be creating different components for each type, but then how do we display multiple component types in a single list of form elements?
Is it possible to create a component with child components of different types based on the data in the fields array?
If you have any suggestions or better ways to tackle this problem while working with Vue, your guidance is greatly appreciated as I'm still new to learning Vue!