0
227
VistasDisplay dynamically generated forms next to each other in v-for loop
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..
2 Respuestas
Responde la pregunta0
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>
0
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