display selection, checkboxes, datepicker, etc. dynamically based on json file

Question

Additional question to a question of me before

I'm displaying input fields dynamically based on my json file - now I want to display selections, checkboxes and a datepicker as well based on their groups.

How I'm able to solve this - I need to push these elements into computedJSON, but writting for example to selection options: item.selection is not working.

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}); //Need to input here my selection, checkbox and datepicker 
    } else {
    computedJson[item.group].push({label: item.label, type: item.type}); //Here too 
   }
  }
return computedJson;
}
</script>

new 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": "Test1"
    },
    {
        "label": "Date",
        "date": "yes",
        "gruppe": "Test3"
    }
]

Amaarockz · Accepted Answer · 2021-10-07 06:37:56Z

1

As per your new json try changing the condition in v-if and options prop as below

<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.label === 'Selection'" :options="item.selection"></b-form-select> // change added
        <b-form-checkbox-group v-if="item.label === 'Checkbox'" :options="item.selection"></b-form-checkbox-group> // change added
        <b-form-datepicker v-if="item.date"></b-form-datepicker>
     </div>
    </tr>
  </tbody>
</table>

Modified the computed Property

<script>
export default {
 computed: {
  getComputedJson() {
   const computedJson = {};
   this.json.forEach(item => {
    if(!computedJson[item.group]) {
     computedJson[item.group] = [];
     if(item.label === 'Checkbox' || item.label === 'Selection') {
      computedJson[item.group].push({label: item.label, selection: item.selection, type: item.type}); // Provided you should have the options in item.selection
     } else {
      computedJson[item.group].push({label: item.label, type: item.type});
    } else {
     if(item.label === 'Checkbox' || item.label === 'Selection') {
      computedJson[item.group].push({label: item.label, selection: item.selection, type: item.type}); // Provided you should have the options in item.selection
     } else {
    computedJson[item.group].push({label: item.label, type: item.type});
    }
   }
  }
return computedJson;
}
</script>

edited Oct 7, 2021 at 6:37

answered Oct 6, 2021 at 14:49

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B0BBY Over a year ago

Thanks - but how can I push it to my table? Because only with computedJson[item.group].push({label: item.label, type: item.type}); it's not working..

Amaarockz Over a year ago

Check the edited answer

Collectives™ on Stack Overflow

display selection, checkboxes, datepicker, etc. dynamically based on json file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related