Display dynamically generated forms next to each other in v-for loop-CodePudding

I generate dynamic forms based on a json file. But they will be displayed among each other like this:

but it should be displayed like this (this is for example 3 inputs, if I have 4 the fourth one should be next to the third one and so on.. )

<div v-for="(item, index) in json" :key="index">
  <b-form-input v-if="item.type" :type="item.type"></b-form-input>
</div>

my object:

[
    {
        "key": "key1",
        "label": "Input Type Text",
        "type": "text",
        "value": ""
    },
    {
        "key": "key2",
        "label": "Input Type Number",
        "type": "number",
        "value": ""
    },
    {
        "key": "key3",
        "label": "Input Type Number",
        "type": "number",
        "value": ""
    }
]

I've tried to solve it with class="row", but its not working because it's still the same that they are among each other..

CodePudding user response：

From the tags I can see you are using bootstrap

In bootstrap you can use row and col to align items side by side in a row.

<div class="row">
  <div v-for="(item, index) in json" :key="index" class="col-6">
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

CodePudding user response：

is it possible that it should only "col-6" my input fields. I have also some selectoin and checkboxes... these I want to have "col-12"

Two ways I would approach this, depending on circumstances

First, if you can edit your input object and want more freedom in your classes you could do this:

Method 1

Edit your object to include classes

[
    {
        "key": "key1",
        "label": "Input Type Text",
        "type": "text",
        "value": "",
        "classes": "col-6"
    },
    {
        "key": "key2",
        "label": "Input Type Number",
        "type": "number",
        "value": "",
        "classes": "col-6"
    },
    {
        "key": "key3",
        "label": "Input Type Number",
        "type": "number",
        "value": "",
        "classes": "col-6 another-class"
    }
]

Then use the classes in your html

<div class="row">
  <div
    v-for="(item, index) in json"
    :key="index"
    :class="item.classes"
   >
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

Method 2

Assign classes with a condition based on input type

<div class="row">
  <div
    v-for="(item, index) in json"
    :key="index"
    :class="{
      'col-6': item.type === 'number' || item.type === 'text' || item.type === 'email',
      'col-12': item.type === 'select' || item.type === 'checkbox',
    }"
   >
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

answer based on s4k1b's