My data is stored in an array:
[
{
type: select,
options: [foo, bar],
label: foo,
required: true
},
{
type: text,
options: [],
label: bar,
required: false
},
{
type: checkbox,
options: [],
label: baz,
required: true
}
]
and I have a Vue template:
<b-row>
<b-col>
<label :for="{{label}}">{{ label }}<span class="required" v-if="required"/></label>
{{ checks type and injects proper form element here }}
</b-col>
</b-row>
I am exploring the best method to iterate through each object, and organize them into individual <b-col> elements, with two columns per row, creating a structure similar to the following:
<b-row>
<b-col>
<label for="size">foo<span class="required" v-if="required"/></label>
<b-form-select id="size">
<options>foo</options>
<options>bar</options>
</b-form-select>
</b-col>
<b-col>
<label for="size">bar<span class="required" v-if="required"/></label>
<b-form-text id="size"/>
</b-col>
</b-row>
<b-row>
<b-col>
<label for="size">baz<span class="required" v-if="required"/></label>
<b-form-select id="size"/>
</b-col>
<label for="size">barbaz<span class="required" v-if="required"/></label>
<b-form-select id="size"/>
</b-col>
</b-row>
...etc.
I am faced with the challenge of determining the most efficient and Vue-friendly approach to achieving this layout.