Как добавитькаждые 2 элемента во время цикла в шаблоне Vue.JS?

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

Я бы реструктурировал ваш массив изображений, используя вычисляемое свойство, которое возвращает массив, разбитый на группы по два изображения.Вы можете даже условно изменить размер чанка, чтобы увеличить или уменьшить количество изображений в строке.

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