I show here how to chunk data into rows while looping through them using Vue JS

Chunk data in Vue JS

<template>
    <div class="col-sm-12 no-padding">
        <div v-if="this.myOffers.length > 0">
            <div v-for="chunk in offerChunks">
                <div class="row">
                    <div class="col-sm-4" v-for="offer in chunk">
                       <!--- Content here ---->
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="alert alert-danger alert-dismissible fade in">No offers found at this time.</div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['myOffers'],
        data() {
            return {
                offers: []
            }
        },
        computed: {
            // Chunk the data coming into 3 cards per row. This is for CSS height reasons (makes everything even when downsizing to smaller or larger screens)
            offerChunks(){
                return _.chunk(this.myOffers, 3);
            }
        },
        mounted() {
            this.offers = this.myOffers;
        },
    }
</script>


// The Component
 <offers :my-offers="{{ $offers }}"></offers>