Looking for Help with Dynamic Input Fields and Additional Elements
I have successfully implemented dynamic input fields based on a JSON file, but now I need to include selections, checkboxes, and a datepicker as well according to their respective groups.
I'm facing challenges in pushing these elements into computedJSON. Simply writing options: item.selection for selections does not seem to work as expected.
template:
<table>
<tbody>
<tr v-for="(group, key) in getComputedJson" :key="key">
<div v-for="(item, indexer) in group" :key="indexer">
<b-form-input v-if="item.type" :type="item.type"></b-form-input>
<b-form-select v-if="item.selection" :options="item.selection"></b-form-select>
<b-form-checkbox-group v-if="item.checkbox" :options="item.checkbox"></b-form-checkbox-group>
<b-form-datepicker v-if="item.date"></b-form-datepicker>
</div>
</tr>
</tbody>
</table>
script:
<script>
export default {
computed: {
getComputedJson() {
const computedJson = {};
this.json.forEach(item => {
if(!computedJson[item.group]) {
computedJson[item.group] = [];
computedJson[item.group].push({label: item.label, type: item.type}); //Include selections, checkboxes, and datepickers here
} else {
computedJson[item.group].push({label: item.label, type: item.type}); //And here too
}
}
return computedJson;
}
</script>
updated json:
[
{
"label": "Input 1",
"type": "text",
"group": "Test1"
},
{
"label": "Input 2",
"type": "text",
"group": "Test2"
},
{
"label": "Input 3",
"type": "text",
"group": "Test3"
},
{
"label": "Input 4",
"type": "number",
"group": "Test1"
},
{
"label": "Selection",
"selection": [
{ "text": "Selection 1" },
{ "text": "Selection 2" },
{ "text": "Selection 3" }
],
"group": "Test2"
},
{
"label": "Checkbox"",
"selection":[
{"text": "Checkbox 1"},
{"text":"Checkbox 2"},
{"text": "Checkbox 3"}],
"group" &quo; Test1"
}
,
{
& "label" : "Date",
"date": "Yes",
"gruppe": "Test3"
Although the original text involved questions regarding implementing dynamic input fields based on a JSON file, this modified version delves deeper into incorporating selections, checkboxes, and a datepicker element within the existing structure.
]