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">。 < / p>

<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

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

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/

Answer 2

这是说您的开/关标签不匹配。在您的代码中：

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

您有<b-row :key="index">（没有任何东西关闭）和</b-row>（没有任何东西打开）。你做不到由于您的<template v-if="...">标记会检查同一件事，因此可以执行以下操作：

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

我没有使用vue-bootstrap的经验，所以我不知道这是否会引发任何其他问题，但这应该可以解决当前引发的错误。

Answer 3

我会做这样的事情：

 <template>
        <div v-for="url in urls">
          <div class="row">
            <div class="col">
              <p>test</p>
            </div>
            <div class="col">
              <p>test</p>
            </div>
          </div>
        </div>
</template>

在这里尝试：https://codesandbox.io/s/bootstrap-vue-sandbox-mpt2b

如何在Vue.JS模板中循环时每两个元素添加<div class =“ row”>？

3 个答案: