Is there a plethora of new content waiting to be discovered as you scroll through the old using Vue and

I have been working on a code that looks like this:

<template>
    <div class='sights-list'>
        <div v-for='(sight, index) in sights'>
            <p>{{ sight.name }}</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data: function() {
        return {
            sights: []
        }
    },
    methods: {

    },
    mounted(){
        axios.get('/getSights/' + lat + '/' + lng + '/' + type)
            .then(response => {
                this.sights = response.data.result.results
        }).catch((error) => console.log(error));
    }
}

Now, I am looking to send another axios GET request once the user has scrolled through all the content generated from the initial GET request upon component mounting.

However, I am uncertain about how to determine when the user has reached the bottom of the old content after scrolling. Any suggestions on how to achieve this?

Answer №1

Not long ago, I had a similar task that required me to utilize pure javascript:

manageInfiniteScroll = () => {
    this.window.addEventListener('scroll', (event) => {
        const sideList = document.getElementsByClassName('list-group ul-lista-popup');

        if (sideList && sideList[0]){

            const endPos = sideList[0].scrollHeight - sideList[0].clientHeight;
            const topPos = sideList[0].scrollTop;

            if (endPos - topPos <= 0) {
                const newIndex = (this.itemsReduced.length + 30) <= this.itemsCompleted.length ? (this.itemsReduced.length + 30) : this.itemsCompleted.length;

                const newArr = this.itemsCompleted.slice(0, newIndex);

                this.itemsReduced = newArr;
            }
        };
    }, true)
}

Remember to invoke this function in the mounted lifecycle method.

Be sure to adjust the code according to your needs (especially the class name in getElementsByClassName). I hope you find this information helpful!

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

Symfony: The Database Query Button with a Pop-up Feature

I am looking to create a button that will automatically search my database for all users with a "secouriste" attribute set and display their first name, last name, and phone number in a popup. After conducting research, here is what I have gathered: In m ...

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

What is the best way to accomplish this task using JavaScript fetch?

I stumbled upon this solution. Essentially, it's a call to Mailchimp requesting a confirmation email be sent to users after submitting their email. The script functions flawlessly with jquery. However, I have a distaste for jquery and find it bother ...

Extract data from JSON object

My JSON object is called idAndNames.json; [ { "id":"1", "name":"name1"}, { "id":"2", "name":"name2"}, { "id":"3", "name":"name3"} ] I'm looking to filter it by ID and name function applyFilter(id, valueItem) { return id <= valueIte ...

The $http.get() function in Angular fails to function properly when used in Phonegap DevApp

Trying to retrieve a JSON file in my Phonegap App using angulars $http is causing some issues for me. I have set up this service: cApp.factory('language', function ($http) { return { getLanguageData: function () { return ...

Using setTime in JavaScript allows for customizing and adjusting the

I'm having trouble getting this code to display the time. I thought it would work, but it's not showing the time. Can someone please help me figure out what's going wrong? function startTime() { var currentTime = new Date(); ...

Is there a way to access the value of an IPC message beyond just using console log?

I am developing an app using electron and angular where I need to send locally stored information from my computer. I have successfully managed to send a message from the electron side to the angular side at the right time. However, I am facing issues acce ...

Guidance on modifying a sub row within a main row in Sails.js

I am currently working on a sails.js application This is the model structure for my application: name: String, address:String, appSettings: { header: String, color : String, font: String, } In my development process, I have utilized independ ...

Showcasing international data using a table in Vue.js

As I work on creating a page that includes a section dedicated to products, I have encountered a challenge. Within the product data, there is an attribute called id_categoria which corresponds to a category. Instead of displaying the category ID, I want to ...

Sending PHP variables to a pie chart in JavaScript via GoogleSome options for passing

I am currently working on a project where I have a 3D pie chart from Google. I am trying to pass PHP variables through to represent the percentages on the chart, which are pulled from a database. However, I am running into an issue where the percentage dis ...

Transferring data between components in React by passing parameters through Links

When calling another component like <A x={y}/>, we can then access props.x inside component A. However, in the case of calling EditCertificate, the id needs to be passed to the component. I am using a Link here and struggling to pass the id successf ...

The issue of Angular curly braces malfunctioning in some simple code examples reversed my

<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script> </head> <body style="padding: 20px 20pc;"> <div ng-app="app"> ...

Avoid triggering the onClick event on multiple submit buttons when the form data is deemed invalid by vee-validate

How can I ensure that the onClick event on a button is only called if certain input fields are valid, using vee-validate ValidationObserver? The validation should apply to individual buttons within a form, rather than the entire form itself, as there are m ...

encountering an issue with data[i].order not being recognized as a function

I have a task to complete, which involves calling JSON objects based on a search and displaying the results in a bootstrap table. I have been trying to solve this in different ways, but as I am new to JS, I haven't been successful. I have been writing ...

Issue with HighCharts: Bar columns not extending to the x-Axis when drilling up

I am encountering an issue with HighChart/HighStock that I need help with. To illustrate my problem, I have set up a JSFiddle. The problem arises when a user drills down on a bar column, causing the y-axis to shrink and consequently making the x-axis appea ...

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

I need to showcase multiple duplicates of 2 different images on a webpage. Users are asked for the duplication speed, which I have already implemented, and also how many copies of each image they want. function show_image() { var img = document.create ...

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

When I directly call the Spring Boot API in the browser, it successfully creates and downloads a PDF report. However, when I try to make the same GET request from Angular 6, I encounter the following error: Here is the code snippet for the Spring Boot (Ja ...

JavaScript confirm function fails to validate a required field validator

Utilizing the required field validator to validate a text box and prompting for confirmation on the click of a submit button using the confirm() function in JavaScript has posed a challenge. Upon pressing OK in the confirmation box, the page refreshes an ...

Guide to creating a secure login page with the help of cookies

I'm in need of a quick guide on how to implement a login page for a website using cookies. Every user has a unique username and password. Is it necessary to store both the username and password in the cookies, or is just the username sufficient? Is ...

Different methods to obscure solely URLs in AngularJS

Is there a way to effectively obfuscate URLs in AngularJS? Currently, I am using base 64 encoding as a method of obscuring my URLs. For example, let's say my URL is: I encode and decode it like this: aHR0cDovLzE5Mi4wLjAuMC9teS91cmwv However, when ...