Dynamic Pagination With Vue.js – DZone Web Dev
For this tutorial, I will be using Atom.
- Download the Atom code editor
- Install the Vue-fmt plugin if you do not see code being highlighted
Firstly, What Is Vue.js?
What Is Nuxt.js?
Nuxt.js is a framework for Vue.js. It is mainly used for server-side rendering of Vue.js apps. As this is a framework for Vue.js, there are many similarities between Nuxt.js and Vue.js. You do not need to make many changes in your app if you are migrating from Vue.js to Nuxt.js. For example, Router-link in nuxt.js.
Now, we can start developing the project. Developing dynamic pagination requires you to have basic knowledge about Vue.js and Nuxt.js. You should know the installation and basic HTML, CSS, and router-links. I have to tell you that Vue.js has one of the best tutorials, you can visit here to know more.
In this article, we have used w3schools’ CSS material. Copy and paste the following code if you are developing an app with Nuxt.js.
And in case you are using Vue.js then update index.html.
Let’s dive into the code,
The template tag contains all the basic HTML about laptops, RAM, operating system, and price, there is nothing “Vueish” about it except “V-for”.
You can use the v-for directive to render a list of items based on an array. The V-for directive requires “item in items”, in this case, the first v-for directive is “pageNumber in totalPages” and another v-for directive is “article in paginate” which will get all the information about a laptop. When “currentPage” is 1, the dynamic pagination will start from the first page. As soon as a user clicks on another page, “currentPage” updates to the page number clicked by the user.
Have a look at the following code, it is a data function with a return object which is used for two-way data binding. This object contains the articles array which has all the information about a laptop operating system, price, weight, size, storage, and laptop ram. You can update “itemsPerPage” to any number. If you want to show five items per page, then you can update that to five.
Add the following code inside the methods. “setpage” function is called to update the current page.
Here is the computed property. “totalPage” is the logic for total dynamic pages. For example, if itemsperpage is 3 and there are a total of 12 items in the Article array then “totalPage” element will be 4.
Add some styling to change the color of the current page.
So, that’s a wrap. After implementing this code, if you have any doubts then do not hesitate to reach us by dropping a comment below.
Credit: Source link