Adding static data along with fetched data in Vue.js: A simple guide

I am looking to include advertisement banners after every 5 items in the data displayed by my application. This means that for every scroll, you would see five fetched data items followed by an advertisement, and then another set of five fetched data items.

Does anyone have any suggestions on how I can achieve this?

<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>
javascriptvue.jsfrontend

Answer №1

Figured out the solution on my own: The index parameter should be used

<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 display every 5th item</p>  
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do not need to refresh the form

I developed a PHP-based Feedback form that includes a Popup from Foundation 5. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .auto-style1 { margin-left: 1px; ...

javascriptphpjquery

Send a text input to a shell script using node.js and read it from the standard input

I'm using the simple-ssh library to run a shell script on my remote server. The script requires user input for the SSH password and directory path during execution. I want to pass these values as strings using node.js/javascript. ./myscript.sh Verif ...

javascriptnode.js

What is the best way to separate my Webpack/Vue code into a vendor.js file and exclude it from app.js?

My plan is to create two separate files, vendor.js and app.js, for my project. In this setup, vendor.js will contain the core code for Webpack and Vue.js, while app.js will solely focus on the Vue.js code specific to my application. To streamline this proc ...

javascriptvue.jswebpacklaravel-mixvendor

Unresolved Axios jsonp request causing code blockage

Recently, I created a function to retrieve Google suggestions: const fetchGoogleSuggestions = async (searchQuery: string) => { const results = await axios({ url: `https://suggestqueries.google.com/complete/search?client=chrome&q=${searchQuery ...

javascripttypescriptaxios

A useful tip for adding a blank line in a specific index of an array is to utilize the character while iterating through the array with a v-for loop to generate a list

I am trying to find a way to add an empty line before a specific array element while iterating through it using v-for to generate a list. Using \n does not seem to be effective for this task. <!-- Here is the template section --> <ul> ...

vue.js

Troubleshooting Nested jQuery Plugin Selector Problems

I'm looking to have the ability to nest one plugin inside another. However, my selectors seem too broad and are capturing elements within the nested plugin as well. For instance, consider the following HTML structure: <div class="my-plugin"> ...

javascriptjqueryjquery-selectors

When utilizing a Service through UserManager, the User variable may become null

Utilizing Angular 7 along with the OIDC-Client library, I have constructed an AuthService that provides access to several UserManager methods. Interestingly, when I trigger the signInRedirectCallback function from the AuthService, the user object appears ...

javascriptangulartypescriptecmascript-6single-page-application

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Currently, I am changing the height of a container from 0px to auto. Since I do not know the exact final height needed for the container, using max-height could be an option but I prefer this method. The transition from 0 to auto works smoothly, however, ...

javascriptcssvue.jscss-transitions

Sending a function along with event and additional arguments to a child component as a prop

I've managed to set up a navigation bar, but now I need to add more complexity to it. Specifically, I have certain links that should only be accessible to users with specific permissions. If a user without the necessary permissions tries to access the ...

javascriptreactjs

When an object is pushed into an array, it gets duplicated and also appears in a proxy when viewed in the console

Working with Firebase 9 and Vue 3 in building a chat application. The issue at hand is that when I push message objects to the messages array [], the console shows duplicates like this: Proxy {0: {…}, 1: {…}} [[Handler]]: Object [[Target]]: Array( ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

Unpacking nested objects using dynamically generated property names in a React state - a guide

Having trouble with using setState and figuring out how to destructure the object with a dynamic property name, denoted by id. The state looks like this after computation: { "inputConfig": { "5d4d684cadf8750f7077c739": { "0": "5d4d ...

javascriptreactjssetstateobject-destructuring

Exploring Angular 10: Managing Two Promises in ngOnInit

I am currently working on integrating the Strava API into my Angular app. To summarize briefly: When a user clicks on a button to connect to Strava They are redirected to Strava for authentication (using PKCE) Strava then redirects back to my app with a ...

javascriptangularfirebasepromiseangularfire2

The variable "vue" is not properly defined within the instance, yet it is being called

I'm currently working on a Vue app and encountering an issue. The onScroll function is working correctly, but when I click the button component to trigger the sayHello function, I receive an error message. The error states: "Property or method &apo ...

javascriptvue.js

Mastering the functionality of array.map()

Apologies for the simplicity of my query. I am in the process of streamlining some code and have been exploring the use of array.map rather than traditional for loops to iterate through arrays and using array.push. I've managed to grasp the fundament ...

javascriptarrays

Does a React functional component continuously re-render if it contains a child component?

For the past few days, I've been facing a performance issue in a React app (specifically React Native). The core of the problem is this: Whenever a function component Parent has another function component as its Child, the Parent will consistently re ...

javascriptreactjsreact-native

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Initializing JavaScript prior to registering the Polymer element

When upgrading from Polymer version v0.5 to v1.0, the process of registering Polymer elements seems to have changed. Previously, in Polymer v1.0, we were able to execute JavaScript code from the index.html file to initialize all the necessary objects in ou ...

javascriptobjectinitializationpolymer-1.0

`Issues with managing Promise and Async functions`

I'm currently working on a project where I am utilizing promises and async functions to send chunks of an array to an API call, which then inserts the data into a database. My goal is to have the function chunk the array, wait for the backend operatio ...

node.jsvue.js

Adjust the size of the font in accordance with the value of the span text

I am looking to adjust the font size based on the value within the span element. The numbers in the class name may vary. Issue: using text() retrieves all values (e.g. 50020) I want to incorporate each() and $this in some way. How can I do this? Thank ...

javascriptjqueryhtmlcss