The pagination functionality in Vue.js does not behave as described in the documentation

I've been working on implementing this paginator in vue and come across an issue with the layout. Here is what my current paginator setup looks like:

https://i.stack.imgur.com/6ovhU.png

I followed the instructions to import and use it as shown below:

import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate);

Additionally, I added the necessary script link in my HTML page:

<script src="https://unpkg.com/vuejs-paginate@latest"></script>

When integrating the component into my page, I included the following code:

<paginate
  :page-count="31"
  :page-range="10"
  :maring-pages="5"
  :click-handler="pageClickCallback"
  :container-class="'pagination'"
/>

Despite following the documentation closely, the layout does not display correctly. Can anyone identify where the issue might be?

vue.js

Answer №2

To properly implement pagination, you need to include the necessary Bootstrap classes in your project. Make sure to import the CSS from Bootstrap somewhere on your page.

After including the Bootstrap CSS, use the code snippet below to set up the pagination functionality:

<paginate
    v-model="page"                
    :click-handler="changePage"
    :container-class="'pagination'"   
    :page-count="10"    
    :page-class="'page-item'"
    :next-class="'page-item'"
    :prev-class="'page-item'"
    :page-link-class="'page-link'"
    :prev-link-class="'page-link'"
    :next-link-class="'page-link'">
</paginate>

Answer №3

<paginate 
   v-model="page" 
   :page-count="20" 
   :prev-text="'Previous'"
   :next-text="'Next'" 
   :container-class="'pagination-container'" 
>
</paginate>

.pagination-container {
  display: block;
  padding-left: 5px;
  margin-top: 30px;
  border-radius: 5px;
}
.pagination-container > li {
  display: inline-block;
}
.pagination-container > li > a,
.pagination-container > li > span {
  position: relative;
  float: left;
  padding: 8px 14px;
  margin-right: 2px;
  line-height: 1.6;
  color: #4488ee;
  text-decoration: none;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}
.pagination-container > li:first-child > a,
.pagination-container > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination-container > li:last-child > a,
.pagination-container > li:last-child > span {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.pagination-container > li > a:hover,
.pagination-container > li > span:hover,
.pagination-container > li > a:focus,
.pagination-container > li > span:focus {
  z-index: 3;
  color: #336699;
  background-color: #f0f0f0;
  border-color: #bbb;
}
.pagination-container > .active > a,
.pagination-container > .active > span,
.pagination-container > .active > a:hover,
.pagination-container > .active > span:hover,
.pagination-container > .active > a:focus,
.pagination-container > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  cursor: pointer;
  background-color: #4488ee;
  border-color: #4488ee;
}
.pagination-container > .disabled > span,
.pagination-container > .disabled > span:hover,
.pagination-container > .disabled > span:focus,
.pagination-container > .disabled > a,
.pagination-container > .disabled > a:hover,
.pagination-container > .disabled > a:focus {
  color: #999;
  cursor: not-allowed;
  background-color: #f9f9f9;
  border-color: #ccc;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am attempting to show a message using v-model, however, it seems to be malfunctioning

I am currently learning how to use Vue.js with Laravel. However, I am encountering an issue when trying to display a message in an input tag using v-model. <div class="card" id="myAppId"> <p>@{{ message }}</p> <input type="text" v-mod ...

laravelvue.js

Copy both the image and JSON object to the clipboard

I am attempting to utilize the clipboard API to write an image and JSON object to the window clipboard. I am working with Vue and Electron and have successfully written an image and plain text, but I encounter an error when trying to write a JSON object: ...

javascriptjsonvue.jselectronclipboard

Vue 3 Single Page Application. When selecting, it emits the language and the contentStore does not update the content exclusively on mobile devices

My Vue 3 Single Page Application is built on Vite 4.2 and TypeScript 5.02. When I click to select a language, it emits lang.value and in the parent component App.vue, contentStore should update the content. It works flawlessly on my Linux Ubuntu desktop i ...

typescriptvue.jsvuejs3html-selectpinia

Utilize a for loop in Vue.js to save a fresh array of objects in a structured format

Trying to achieve the following using Vue: I have two JSON objects that provide information on languages and the number of inputs per language. Using nested loops, I display all the inputs. My goal is to create an object for each input with additional det ...

javascriptarraysjsonvue.jsfor-loop

The ultimate guide to handling arrays in Vue: tackling the v-model dilemma

Just getting started with Vue and I've been attempting to modify an array of strings using the v-model property. I put together a small JSFiddle where I'm encountering issues with editing the array. An error message appears suggesting that I shou ...

vue.jsvuejs2

When Vue 3 is paired with Vite, it may result in a blank page being rendered if the

Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...

javascripthtmlvue.jsvuejs3vite

creating a Vuejs button function that will add together two given numbers

Help needed with VueJs code to display the sum of two numbers. Seeking assistance in developing a feature that calculates the sum only when the user clicks a button. Any guidance would be greatly appreciated! <!DOCTYPE html> <html lang="en"> ...

javascriptvue.jsvue-component

An unconventional web address was created when utilizing window.location.hostname

I've encountered an issue while trying to concatenate a URL, resulting in unexpected output. Below you'll find the code I tested along with its results. As I am currently testing on a local server, the desired request URL is http://127.0.0.1:800 ...

javascriptlaravelvue.js

What is the best way to establish a maximum value for variable inputs?

In my Vue form, I have dynamic inputs for issuing shares to shareholders. The user first registers the total amount of shares in the form, then starts issuing this total amount partially by adding dynamic inputs as needed. Finally, the form is submitted. M ...

javascriptvue.jsvee-validate

Is there a way to link dynamic server fields with VueJS?

How can I bind data posted by the server with Vue.js in order to display the data instead of field names? <script> module.exports = { data: function () { return { filedNameFromServer: ['{{filed1}}' ...

javascriptvue.jsvue-resourcevue-component

Utilize VUE components for rendering v-html

I'm currently working on developing a unique VUE component preview feature, reminiscent of JSFiddle or CodePen, within the VUE framework. The specific VUE container responsible for previewing the components is outlined as follows: <quickpreview v- ...

vue.jsvuejs2vue-component

A guide to successfully interacting with multiple elements simultaneously at a single spot

Within my graphic chart, I have various dots that may be located in the same spot. I am looking for a way to handle clicks on two or more elements simultaneously in Vue 3. Do you know of any straightforward methods to achieve this? I attempted using refs ...

javascriptvue.jsvuejs3

Logging in with oidc-client and IdentityServer4 on separate domains

I am currently working on a VueJs application hosted on localhost which utilizes the oidc-client.js library for logging in to an IdentityServer4 server located in a production environment on another domain. Upon successful login, I am redirected back to t ...

c#vue.js.net-coreidentityserver4oidc-client-js

Issue with redrawing pie chart positions in vue2-highcharts

For my project, I am creating a 3-pie chart using a single Highchart in a resizable container with VueJs and the vue-highcharts component. To achieve this, I need to adjust the positions and sizes of the pies whenever the container is resized. However, I a ...

highchartsvue.js

Setting a proper prop path for nested data within a table component in Element UI using Vue JS

I'm currently facing an issue with form validation in a table layout using element-ui. Specifically, I am struggling to pass a valid prop to the el-form-item component. The structure of my data model is as follows: form: { invoices: [ { ...

vue.jsvuejs2frontendvue-componentelement-ui

The Vue Nuxt application returned an error when running npm dev because the new image file

Hey there, I recently added an image to the assets folder and after running npm run dev, my page is not displaying the image. You can check out the image https://i.stack.imgur.com/EczEy.png Here's my code: <div :style="{ backgroundImage: ...

vue.jsnuxt.js

Nativescript-vue Not Providing Real-Time Updates

Previously, I would run the command: tns run android --bundle, and any changes I made would automatically reflect in both physical and virtual Android emulators. However, now when I save my changes, nothing happens, and I have to rerun the command to see ...

vue.jsnativescriptnativescript-vue

What is the best way to remove uncategorized posts from WordPress for good?

In my WordPress site, I am attempting to delete the uncategorized category permanently. After doing some research, it seems like there may not be a straightforward solution for this issue. However, in my vue.js project where I am utilizing the wp api and ...

wordpressapivue.jsaxioswordpress-rest-api

In Laravel, Inertia.js will automatically close a modal if there are no validation errors present

Here is the method I am currently using: methods: { submit() { this.$inertia.post('/projects', this.form); this.openModal = false; }, }, Unfortunately, this method closes the modal even if there are validation erro ...

javascriptlaravelvue.jsinertiajs

Encountering an issue stating: "[Vuetify] v-ripple can only be applied to block-level elements" while attempting to deploy on Heroku platform

Lately, I've been working on developing an app using Rails 6 with a mix of Vue and Vuetify for the front end. Everything runs smoothly on my local machine. However, as soon as I attempt to deploy it on Heroku, I encounter this error in the debug conso ...

vue.jsherokuvuetify.jsruby-on-rails-6