我如何在Vue中遍歷數組的次數減少一半？

Question

我有一個數據數組：

[
  {
    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的方式完成此任務。

Answer 1

您可以遍歷數組，將每個元素放置在b-col ，並將每個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-bootstrap，但是引導程序文檔指出：

如果在一行中放置超過12列，則每組額外的列將作為一個單元換行

https://getbootstrap.com/docs/4.1/layout/grid/#column-wrapping