Infinite Scrolling in Vue with asynchronous loading through Watchers/Axios to add more info
- 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
- 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
- Since the processing of the options is finished you have access to reactive data properties and change them if you want
- 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