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

The Sentinel of Vue-router Navigation

What is the purpose of storing the Vue instance in a variable or constant?

What is the best way to interact with my component in React?

Theme.breakpoints.down not being acknowledged by MUI breakpoints

Tallying the number of words delimited by a comma

Issues persist with jQuery ajax request attempting to retrieve data from database

Issue with Custom Tooltip in Mootools 1.2 - Images displaying prematurely before hover action

Enhancing Typography in Material UI with Custom Breakpoints in React CustomThemes

Tips for excluding specific codes from running in BeforeAll for a specific Describe() block in Jasmine

Tailored design - Personalize interlocking elements

partial download between servers

Utilize dynamically generated form fields to upload multiple files at once

Enhanced Rating System for Asp.Net

Why does the onBlur event function in Chrome but fails to work in Safari?

Retrieve a zip file using React and Node from a RESTful API

Uploading photos to Postgres through express/multer

show button after the page has finished loading

Display the chosen alternative in a Bootstrap dropdown menu

Using the `preventDefault` method within an `onclick` function nested inside another `onclick

I am experiencing an issue where the jquery sleep function is not being executed during