Vue.js: How to add static data between fetched data?

Question

For my application I want to add advertisement banners after every 5 items in my data.

So when you scroll you see five data items that I fetched, 1 advertisement and then again 5 fetched data items.

Any Idea how?

<div v-if="this.data.length != 0" class="md:flex md:flex-wrap md:justify-around">
    <div class="border-b border-blue-100  md:w-80" v-for="noodnummer in resultQuery" :key="noodnummer.id">  
        <div class="flex flex-row mt-4 ml-4 mr-4 pl-2">
            <img :src="'http://noodnummer.docker/'+ noodnummer.logo" class="w-16 h-16 mb-4 mr-4" alt="logo"/>
            <div class="justify-start">
                <h2 class="font-medium text-sm w-44 text-left">{{noodnummer.name}}</h2>
                <div class="flex flex-row mt-1.5">
                    <img src="../../src/assets/icons/phone-call.svg" class="w-3 mr-2" alt="phone"/>
                    <h2 class="font-regular text-xs text-blue-900">{{noodnummer.number}}</h2>
                </div>
                <a :href="'https://' + noodnummer.website" id="website" class="flex flex-row mt-1">
                    <img src="../../src/assets/icons/external-link.svg" class="w-3 mb-4 mr-2 pt-0.5" alt="link"/>
                    <div class="font-regular text-xs text-blue-900 w-44 text-left overflow-hidden whitespace-nowrap">{{noodnummer.website}}</div>
                </a>
            </div>
            <div class="flex items-end flex-col w-screen">
                <router-link to="/report">
                    <img src="../../src/assets/icons/alert-triangle.svg" class="w-4 mr-2 mt-1" alt="report"/>
                </router-link>
                <img src="../../src/assets/icons/chevron-right.svg" class="w-4 mr-2 mt-7 rotate-90 md:hidden" alt="extend"/>
            </div>
        </div>
        <p class="font-regular text-xs ml-6 mr-6 text-gray-500 mb-4">{{noodnummer.description}}</p>
    </div>
</div>
Copy

Answer 1

Found the answer myself: You would want to use the index parameter

<div v-if="this.data.length != 0" class="md:flex md:flex-wrap md:justify-around">
    <div class="border-b border-blue-100  md:w-80" v-for="(noodnummer, index) in resultQuery" :key="noodnummer.id">
        <div class="flex flex-row mt-4 ml-4 mr-4 pl-2">
            <img :src="'http://noodnummer.docker/'+ noodnummer.logo" class="w-16 h-16 mb-4 mr-4" alt="logo"/>
            <div class="justify-start">
                <h2 class="font-medium text-sm w-44 text-left">{{noodnummer.name}}</h2>
                <div class="flex flex-row mt-1.5">
                    <img src="../../src/assets/icons/phone-call.svg" class="w-3 mr-2" alt="phone"/>
                    <h2 class="font-regular text-xs text-blue-900">{{noodnummer.number}}</h2>
                </div>
                <a :href="'https://' + noodnummer.website" id="website" class="flex flex-row mt-1">
                    <img src="../../src/assets/icons/external-link.svg" class="w-3 mb-4 mr-2 pt-0.5" alt="link"/>
                    <div class="font-regular text-xs text-blue-900 w-44 text-left overflow-hidden whitespace-nowrap">{{noodnummer.website}}</div>
                </a>
            </div>
            <div class="flex items-end flex-col w-screen">
                <router-link to="/report">
                    <img src="../../src/assets/icons/alert-triangle.svg" class="w-4 mr-2 mt-1" alt="report"/>
                </router-link>
                <img src="../../src/assets/icons/chevron-right.svg" class="w-4 mr-2 mt-7 rotate-90 md:hidden" alt="extend"/>
            </div>
        </div>
        <p class="font-regular text-xs ml-6 mr-6 text-gray-500 mb-4">{{noodnummer.description}}</p>
        <p v-if="(index + 1) % 5 === 0">This will pop up every 5 items</p>  
    </div>
</div>
Copy