Para mi aplicación, quiero agregar pancartas publicitarias después de cada 5 elementos en mis datos.

Entonces, cuando se desplaza, ve cinco elementos de datos que obtuve, 1 anuncio y luego nuevamente 5 elementos de datos obtenidos.

¿Alguna idea de cómo?

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