What is the best way to insert a <div class="row"> every 2 items in a Vue.JS template loop?

Question

What is the best way to insert a <div class="row"> every 2 items in a Vue.JS template loop?

In my model, I have an array of images' URLs of varying lengths.

I want to display 2 images per row on my page, resulting in the following layout:

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

However, I am struggling to conditionally add the opening and closing tags of row.

Here is the code snippet I attempted, but it's not functioning as expected:

I am utilizing Bootstrap-Vue, where b-container, b-row, and b-col correspond to

<div class="container">

and

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

Encountered Error:

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

javascript twitter-bootstrap templates vue.js bootstrap-4

Answer 1

Answer №1

To enhance the organization of your image array, consider restructuring it by utilizing a computed property that divides the array into groups of two images. You also have the option to dynamically adjust the group size to alter the number of images displayed in each row.

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

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

     return row;
   }
}

For a demonstration, refer to this functional example utilizing an array. https://jsfiddle.net/skribe/0fvj5643/7/

Answer 2

To enhance the organization of your image array, consider restructuring it by utilizing a computed property that divides the array into groups of two images. You also have the option to dynamically adjust the group size to alter the number of images displayed in each row.

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

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

     return row;
   }
}

For a demonstration, refer to this functional example utilizing an array. https://jsfiddle.net/skribe/0fvj5643/7/

Answer 3

Answer №2

This is one way to achieve the desired result:

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

Give it a try here: https://codesandbox.io/s/bootstrap-vue-sandbox-mpt2b

Answer 4

This is one way to achieve the desired result:

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

Give it a try here: https://codesandbox.io/s/bootstrap-vue-sandbox-mpt2b

Answer 5

Answer №3

It seems like there is a mismatch between your opening and closing tags in the code snippet provided:

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

The issue lies in having <b-row :key="index"> without a corresponding closing tag, and </b-row> without an opening tag. To rectify this, you can adjust the structure like this:

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

Although I'm not familiar with vue-bootstrap, this adjustment should resolve the current error without causing any new ones.

Answer 6

It seems like there is a mismatch between your opening and closing tags in the code snippet provided:

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

The issue lies in having <b-row :key="index"> without a corresponding closing tag, and </b-row> without an opening tag. To rectify this, you can adjust the structure like this:

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

Although I'm not familiar with vue-bootstrap, this adjustment should resolve the current error without causing any new ones.

What is the best way to insert a <div class="row"> every 2 items in a Vue.JS template loop?

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing user engagement with PDF files using AngularJS to create an interactive and captivating page-turn

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

javascript string assignment

Utilizing a jQuery plugin or function with customizable options when adding elements dynamically

Browsers seem to only respond to the FileReader onload event on the second try

Using IF-ELSE statements in jQuery for DataTables

Is it possible for me to showcase a grid or table within the div css class with the assistance of bootstrap

Searching for repeated values across disparate object fields?

Display all active services in a new list item using AngularJS Ionic's ng-repeat directive

Trouble with parsing dates in JavaScript using Moment.js

The JavaScript function modifies the value stored in the local storage

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

Changing the 'null' string to null in JavaScript

Encountering an issue in next.js with dynamic routes: getting a TypeError because the property 'id' of 'router.query' cannot be destructured since it is undefined

What is the best way to replace testcaferc.json browsers using the command line interface (CLI

Attempting to wrap my head around the implementation of callback functions in THREEJS

Fetching Results from Promise

Ways to prevent users from manually inputting dates in date fields

Error: The command "vue" is not recognized

Retrieving Data from Repeated Component in Angular 6