[Vuejs]-Display dynamically generated forms next to each other in v-for loop

by

2👍

✅

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

👤Victor bvn

2👍

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>
👤s4k1b

Leave a comment