javascript - 如何在 Vue.JS 模板中循环时每 2 个元素添加 ？

Question

我的模型中有一个可变长度的图像 URL 数组。
我想在我的页面上每行显示 2 张图片，并得到如下结果:

<div class="row">
  <div class="col">
    <img ... />
  </div>
  <div class="col">
    <img ... />
  </div>
</div>
<div class="row">
  <div class="col">
    <img ... />
  </div>
  <div class="col">
    <img ... />
  </div>
</div>
...

但我只是不明白如何有条件地添加row 的开始和结束标签。 。

这是我尝试过的方法，但它不起作用:
我正在使用 boostrap-vue , 所以 b-container , b-row和 b-col基本上是<div class="container">,和 <div class="col"> .

<b-container>
  <template v-for="(url, index) in urls">
    <template v-if="index % 2 == 0">
      <b-row :key="index">
    </template>
    <b-col :key="index">
      <p>{{ index }}</p>
      <b-img
        :src="url"
        alt="charts"
        fluid
      ></b-img>
    </b-col>
    <template v-if="index % 2 == 0">
      </b-row>
    </template>
  </template>
</b-container>

错误:

 Errors compiling template:

  tag <b-row> has no matching end tag.

  40 |      <template v-for="(url, index) in urls">
  41 |        <template v-if="index % 2 == 0">
  42 |          <b-row :key="index">
     |          ^^^^^^^^^^^^^^^^^^^^
  43 |        </template>
  44 |        <b-col :key="index">

Answer 1

我会使用一个计算属性来重构您的图像数组，该属性返回一个分成两个图像组的数组。您甚至可以有条件地更改 block 大小以增加或减少一行中的图像数量。

computed: {
   makeRows(){
     let row = [];
     let i,l, chunkSize = this.rowSize; 

     for (i=0,l=this.images.length; i<l; i+=chunkSize) {
       row.push(this.images.slice(i,i+chunkSize));

     }
     return row;
     }
  }

这是一个使用数组的工作示例。 https://jsfiddle.net/skribe/0fvj5643/7/