Javascript 如何在Vue中循环一个数组，循环次数为存在项的一半？

我有一组数据：

[
  {
    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>

{{label}}
{{检查类型并在此处注入适当的form元素}

我试图找出如何最好地循环每个对象，并将每个对象放入自己的

，每行只有两列，这样它看起来与以下结构类似：

<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列中，并将每个列的宽度指定为50%，如下所示：

<b-row>
    <b-col v-for="item in array" sm="6">
        ...do something with item
    </b-col>
</b-row>


…对物品做些什么

sm=“6”
告诉引导程序使用等于6列的空间量（即50%）
我不确定vue引导，但引导文档说明：

如果一行中放置的列超过12列，则每组
额外的列将作为一个单元包装到新行上

您只需遍历数组，将每个元素放置在a
b-col
中，并将这些列的宽度指定为50%，如下所示：

<b-row>
    <b-col v-for="item in array" sm="6">
        ...do something with item
    </b-col>
</b-row>


…对物品做些什么

sm=“6”
告诉引导程序使用等于6列的空间量（即50%）
我不确定vue引导，但引导文档说明：

如果一行中放置的列超过12列，则每组
额外的列将作为一个单元包装到新行上

谢谢@puelo，这确实解决了我的问题。我认为这是正确的，我感谢你的迅速回答，但我很好奇是否有人也能回答我最初的问题。我一直对学习新的做事方法感兴趣。谢谢@puelo，这确实解决了我的问题。我认为这是正确的，我感谢你的迅速回答，但我很好奇是否有人也能回答我最初的问题。我总是对学习新的做事方法感兴趣。