Use vue.js to add a block of content after every sixth iteration in a loop

Question

Use vue.js to add a block of content after every sixth iteration in a loop

Currently, I have a list of offer cards rendering through a loop. I am adding a row div every 3rd column (bootstrap) element. Now, I need to also add another column element (banner block) for every 6th element in order to achieve a layout like the one shown in the following image:

https://i.stack.imgur.com/ugMet.gif

How can I go about implementing this?

Here is my current code:

<div class="row" v-for="i in Math.ceil(offers.length / 3)">
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12" v-for="offer in offers.slice((i-1)*3, i*3)">
        <h2>{{offer.name}}</h2>
        <h2>{{offer.desc}}</h2>
    </div>
</div>

javascript loops vue.js vue-component

Answer 1

Answer №1

Using a for loop:

    <div class="mycol" v-for="(offer,ind) in offers">
      <template v-if="ind % 5 == 0">
       <h2>banner</banner>
      </template>
      <template v-else>
       <h2>{{offer.name}}</h2>
       <h2>{{offer.desc}}</h2>
      </template>
    </div>

To create a new line for every third column, you can use the following CSS:

.mycol:nth-child(3n+1){
 clear:left;
}

Answer 2

Using a for loop:

    <div class="mycol" v-for="(offer,ind) in offers">
      <template v-if="ind % 5 == 0">
       <h2>banner</banner>
      </template>
      <template v-else>
       <h2>{{offer.name}}</h2>
       <h2>{{offer.desc}}</h2>
      </template>
    </div>

To create a new line for every third column, you can use the following CSS:

.mycol:nth-child(3n+1){
 clear:left;
}

Answer 3

Answer №2

In my opinion, it would be beneficial to shift the focus of your programming from the view to the view model. Consider creating a computed property that organizes your data into groups of offers and banners, as well as rows, and then utilize this computed property in a simple manner.

const chunk = (arr, size) =>
  arr
  .reduce((acc, _, i) =>
    (i % size) ?
    acc :
    [...acc, arr.slice(i, i + size)], []);

new Vue({
  el: '#app',
  data: {
    offers: []
  },
  computed: {
    rows() {
      const withBanners = chunk(this.offers, 5).map((arr) => [...arr, {name: 'banner', type: 'Banner'}]).reduce((a, b) => a.concat(b), []);

      return chunk(withBanners, 3);
    }
  },
  mounted() {
    setTimeout(() => {
      this.offers = [{
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        }
      ];
    }, 500);
  }
});

#app {
  display: grid;
}

.row {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(3, auto);
  justify-content: left;
}

.box {
  width: 8rem;
  height: 8rem;
}

.banner {
  background-color: #f9c;
}

offer {
  background-color: #99f;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div class="row" v-for="row in rows">
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12" v-for="item in row">
      <div v-if="item.type === 'Banner'" class="banner box">
        <h2>{{item.name}}</h2>
      </div>
      <div v-else class="offer box">
        <h2>{{item.name}}</h2>
      </div>
    </div>
  </div>
</div>

Answer 4

In my opinion, it would be beneficial to shift the focus of your programming from the view to the view model. Consider creating a computed property that organizes your data into groups of offers and banners, as well as rows, and then utilize this computed property in a simple manner.

const chunk = (arr, size) =>
  arr
  .reduce((acc, _, i) =>
    (i % size) ?
    acc :
    [...acc, arr.slice(i, i + size)], []);

new Vue({
  el: '#app',
  data: {
    offers: []
  },
  computed: {
    rows() {
      const withBanners = chunk(this.offers, 5).map((arr) => [...arr, {name: 'banner', type: 'Banner'}]).reduce((a, b) => a.concat(b), []);

      return chunk(withBanners, 3);
    }
  },
  mounted() {
    setTimeout(() => {
      this.offers = [{
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        },
        {
          name: 'offer'
        }
      ];
    }, 500);
  }
});

#app {
  display: grid;
}

.row {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(3, auto);
  justify-content: left;
}

.box {
  width: 8rem;
  height: 8rem;
}

.banner {
  background-color: #f9c;
}

offer {
  background-color: #99f;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div class="row" v-for="row in rows">
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12" v-for="item in row">
      <div v-if="item.type === 'Banner'" class="banner box">
        <h2>{{item.name}}</h2>
      </div>
      <div v-else class="offer box">
        <h2>{{item.name}}</h2>
      </div>
    </div>
  </div>
</div>

Answer 5

Answer №3

This solution will cater to your exact needs. I had to tweak the data a bit because Vue's templating language is not tailored for handling logic in this particular scenario

HTML

<div id="app">
  <div v-for="items in rows" class="row>
    <div v-for="item in items" class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">{{item}}</div>
  </div>
</div>

SCRIPT

created () {
    while (this.items.length > 0) {
      const howMany = (this.rows.length % 3 === 0) ? 3 : 2
      const row = this.items.splice(0, howMany)
      if (howMany === 2) row.push('banner')
      this.rows.push(row)

    }
},

https://jsfiddle.net/jamesharrington/k6c0rgL3/17/

Answer 6

This solution will cater to your exact needs. I had to tweak the data a bit because Vue's templating language is not tailored for handling logic in this particular scenario

HTML

<div id="app">
  <div v-for="items in rows" class="row>
    <div v-for="item in items" class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">{{item}}</div>
  </div>
</div>

SCRIPT

created () {
    while (this.items.length > 0) {
      const howMany = (this.rows.length % 3 === 0) ? 3 : 2
      const row = this.items.splice(0, howMany)
      if (howMany === 2) row.push('banner')
      this.rows.push(row)

    }
},

https://jsfiddle.net/jamesharrington/k6c0rgL3/17/

Answer 7

Answer №4

If you're looking to insert a banner every sixth element but display the sixth itself, it might be more efficient to manipulate your data object directly by adding the banner into it. You can achieve this by splitting your array in the following way:

let firstPart = myData.slice(0,5)
let lastPart = myData.slice(5,)

let newData = [...firstPart, banner, ...lastPart]

After implementing this solution, you'll only need to repeat the process every 6 elements.

Answer 8

If you're looking to insert a banner every sixth element but display the sixth itself, it might be more efficient to manipulate your data object directly by adding the banner into it. You can achieve this by splitting your array in the following way:

let firstPart = myData.slice(0,5)
let lastPart = myData.slice(5,)

let newData = [...firstPart, banner, ...lastPart]

After implementing this solution, you'll only need to repeat the process every 6 elements.

Answer 9

Answer №5

Using flex is highly recommended if feasible. To implement this, refer to the following code snippet: http://jsfiddle.net/p6yq5mxv/

const app = new Vue({
  el: '#app',
  data() {
    return {
        items: _.times(20, i => ({type: 'offer'})),
    };
  },
  computed: {
    itemsWithBanners() {
      let result = [];
      this.items.forEach((item, idx) => {
        if (idx && idx % 5 === 0) {
            result.push({type: 'banner'});
        }
        result.push(item);
      });
      return result;
    },
  },
});

Answer 10

Using flex is highly recommended if feasible. To implement this, refer to the following code snippet: http://jsfiddle.net/p6yq5mxv/

const app = new Vue({
  el: '#app',
  data() {
    return {
        items: _.times(20, i => ({type: 'offer'})),
    };
  },
  computed: {
    itemsWithBanners() {
      let result = [];
      this.items.forEach((item, idx) => {
        if (idx && idx % 5 === 0) {
            result.push({type: 'banner'});
        }
        result.push(item);
      });
      return result;
    },
  },
});

Answer 11

Answer №6

Appreciate all the help, I implemented Roy J's solution with some modifications for my specific scenario and achieved the desired outcome. Here is my updated code:

<template>
  <div class="section-space80 results-col" >
    <div class="container" >
      <div class="row">
          <div class="col-md-12">
            <div class="wrapper-content bg-white pinside40">
              <div class="row" v-for="row in rows">
                <div v-for="offer in row" class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
                  <div class="lender-listing" v-if="offer.type && offer.type === 'Banner'">
                    <div class="lender-head">
                        Banner
                    </div>
                  </div>
                  <div class="lender-listing" v-if="offer.mfoName">
                    <div class="lender-head">
                        <div class="lender-logo">Offer</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  const chunk = (arr, size) =>
  arr
  .reduce((acc, _, i) =>
    (i % size) ?
    acc :
    [...acc, arr.slice(i, i + size)], []);

  import axios from 'axios'
  export default {
    data() {
      return {
        showOffers: true,
        loanOffers: [],
        isVisible: false,
        loadMore: true,
        offset: 0,
        rows: ''

      }
    },

    methods: {
      getOffersList: function () {
        let dataElements = this
        dataElements.loading = true
        axios.get('/api/v1/getUserOffers')
          .then(function (response) {
            dataElements.loanOffers = response.data
            const withBanners = chunk(dataElements.loanOffers, 5).map((arr) => [...arr, {name: 'banner', type: 'Banner'}]).reduce((a, b) => a.concat(b));
            dataElements.rows = chunk(withBanners, 3);
          })
      },
    },
    beforeMount(){
      this.getOffersList()
    }
  }

</script>

Answer 12

Appreciate all the help, I implemented Roy J's solution with some modifications for my specific scenario and achieved the desired outcome. Here is my updated code:

<template>
  <div class="section-space80 results-col" >
    <div class="container" >
      <div class="row">
          <div class="col-md-12">
            <div class="wrapper-content bg-white pinside40">
              <div class="row" v-for="row in rows">
                <div v-for="offer in row" class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
                  <div class="lender-listing" v-if="offer.type && offer.type === 'Banner'">
                    <div class="lender-head">
                        Banner
                    </div>
                  </div>
                  <div class="lender-listing" v-if="offer.mfoName">
                    <div class="lender-head">
                        <div class="lender-logo">Offer</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  const chunk = (arr, size) =>
  arr
  .reduce((acc, _, i) =>
    (i % size) ?
    acc :
    [...acc, arr.slice(i, i + size)], []);

  import axios from 'axios'
  export default {
    data() {
      return {
        showOffers: true,
        loanOffers: [],
        isVisible: false,
        loadMore: true,
        offset: 0,
        rows: ''

      }
    },

    methods: {
      getOffersList: function () {
        let dataElements = this
        dataElements.loading = true
        axios.get('/api/v1/getUserOffers')
          .then(function (response) {
            dataElements.loanOffers = response.data
            const withBanners = chunk(dataElements.loanOffers, 5).map((arr) => [...arr, {name: 'banner', type: 'Banner'}]).reduce((a, b) => a.concat(b));
            dataElements.rows = chunk(withBanners, 3);
          })
      },
    },
    beforeMount(){
      this.getOffersList()
    }
  }

</script>

Answer 13

Answer №7

A suggestion I have is to utilize a template and iterate through it in a loop. Within the loop, you can check for a condition using v-if="i%6" --> displaying your article, otherwise display your ad with v-else.

Answer 14

A suggestion I have is to utilize a template and iterate through it in a loop. Within the loop, you can check for a condition using v-if="i%6" --> displaying your article, otherwise display your ad with v-else.

Use vue.js to add a block of content after every sixth iteration in a loop

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Tool designed to analyze the timing of sub requests and methods in Node for benchmarking purposes

The v-ripple effect in Vuetify is limited to block-level elements

Is there a way to trigger events on grandchildren in Vue?

Create compelling visual representations by utilizing Google charts to draw customized charts based on variable

Execute computed function after invoking a function in Vue 3

Attempting to access a variable without wrapping it in a setTimeout function will

Creating a Reddit-inspired voting system using Laravel 5.3 and VueJS

I am having trouble with cookies, as I am unable to retrieve them from my localhost server

Vuetify's <v-text-field> feature automatically clears the input after selecting a result from Google Maps autocomplete

Utilizing Vue's looping functionality to dynamically insert CSS class names

JavaScript - Receiving alert - AC_RunActiveContent.js needed for this page to function

Adjust the ZIndex on a div through interactive clicking

How to use JQuery to parse an external JSON file with array elements in Javascript

Using HTML and JavaScript to create a link that appears as a URL but actually directs to a JavaScript function

Utilize the power of jQuery to make an ajax request to a PHP backend, expecting a response in JSON format. Then,

Exploring AngularJS: The Innovative Navigation Bar

The issue of why iterating over an array of objects does not function properly in React JS

NodeJS Exporting Features

Is it possible to customize the close icons on the autocomplete feature in Material UI?

JavaScript Simplified Data Sorting after Reduction