我有一组数据:
[
{
type: select,
options: [foo, bar],
label: foo,
required: true
},
{
type: text,
options: [],
label: bar,
required: false
},
{
type: checkbox,
options: [],
label: baz,
required: true
}
]
和一个 Vue 模板:
<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>
我正在尝试找出如何最好地循环每个对象,并将每个对象放入其自己的 <b-col>
中。 ,每行只有两列,因此它看起来类似于以下结构:
<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.
我正在努力寻找最好的方法来以类似 vue 的方式干净地完成此任务。
最佳答案
您可以迭代数组,将每个元素放入 b-col
中,并将每列的宽度指定为 50%,如下所示:
<b-row>
<b-col v-for="item in array" sm="6">
...do something with item
</b-col>
</b-row>
sm="6"
告诉 bootstrap 使用等于 6 列的空间量(即 50%)
我不确定 vue-bootstrap,但 bootstrap 文档指出:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line
https://getbootstrap.com/docs/4.1/layout/grid/#column-wrapping
关于javascript - 如何在 Vue 中循环遍历数组,使其次数为项目数量的一半?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51216910/