Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to load next page data in Vue?

I need to make a pokemon game using pokeapi. And there must be pagination for next and previuos button. enter image description here

The next page’s data from this source(data.next). I’m using Vuex for store, and how can I call the next button and load next page? Should I make another axios request and create an action for that? Any help would be appreciated

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

next page has a new result so you should call another api for it and replace it with existing value inside your store with commiting the same mutation. As for your actions, if your URl accepts :page or something inside URL for page variable, just pass the page dynamically to it, forexample: url = pokeapi.co/${page} :

myAction(page) {
const url = `pokeapi.co/${page}`;
axios.get(url)}

. On the other hand if its not accepting any page variable and its completely new url, make url dynamic and send it to the action like bellow:

myAction(url) {
 axios.get(url)}

In the example you shared as response, your next page has another complete url so use the second snippet as for your action.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading