How to lazily load data in Vue?

Question

JavaScript

I have a component with posts, let's say 100 of them in total. There is also a component with each post separately. Implemented via vue-router. The posts themselves are loaded in 20 pieces (I understand that 100 posts can be loaded at once, an academic example). So, the first 20 posts are loaded when the application starts, the rest - when the user has scrolled down enough. But the user can enter the post id manually in the address bar, and if the user did not load the posts initially, and tried to access the post with id 65, then he will not see anything, because they have not loaded yet.
1) What to do in such a situation?
2) And what to do if there are only 100 posts, and the user wants to see, for example, 102?

Answer 1

there are "virtual list" components for organizing huge lists and rendering only those that are currently visible. to search for a separate record, it is better to pull a request to the API.
https://github.com/tangbc/vue-virtual-scroll-list/...