Infinite Scrolling in Vue with asynchronous loading through Watchers/Axios to add more info
Methods:
We Define our methods using the methods member. Methods allow us create functions and bind events to these functions as well as handle these events. In the scrollCheck() function, we use three properties(window.scrollY, window.innerHeight, document.documentElement.offsetHeight) to manually create our infinite scroll feature:
loadPosts(): is core part of the application which load posts from a open source JSON API Sever using AXIOS
resetData(): To reset all the selected options from Controls section
Watchers:
We created one watch member,so that when ever the data in endOfTheScreen watches for changes to the state of the app and updates the DOM accordingly
Created:
Since the processing of the options is finished you have access to reactive data properties and change them if you want
Controls:
Disable/Enable Auto Loading: You want to disable/enable auto loading of posts using direct button control(Incase if you want to save users internet from loading posts unneccessarily)
Select Limit: You can limit No of Posts you want to get as response
Load Posts: Direct loading of posts based on selected controls
Reset Everything: To reset all your controls to actual without reloading