Paginación en Vue.js

Hola Habr! Les presento la traducción del artículo " Paginación en Vue.js " de Denny Headrick.

La paginación mejora UX al permitir a los usuarios visualizar datos en pequeños bloques o en páginas. Por lo tanto, el componente Vue.js se puede paginar, lo que nos permitirá ver solo una parte de nuestros datos a la vez.



Primero, agregaré pieza por pieza a mi objeto JavaScript. Y luego mostraré la plantilla

De todos los datos locales, solo necesito los datos: el número de página.

data(){ return { pageNumber: 0 //   0 } } 

Para los accesorios (propiedades), la transferencia de datos es obligatoria, pero también tomaré el argumento de tamaño para el número máximo de registros.

 props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 } } 

Para mi implementación, usaré métodos para ir a las páginas anterior (anterior) y siguiente (siguiente):

 methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; } } 

Una propiedad calculada calculada rápidamente para averiguar cuántas páginas hay:

 pageCount(){ let l = this.listData.length, s = this.size; //     return Math.ceil(l/s); //  // return Math.floor(l/s); } 

Ahora, la propiedad calculada paginatedData es el lugar donde se combina todo. Estos son los datos filtrados que se mostrarán.

 paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end); } 

Editorial : Inicialmente hice algo horrible y engorroso para copiar una matriz. Usar .slice es el mejor enfoque. Gracias Alexander Karelas .

Y nuestra plantilla

 <div> <ul> <li v-for="p in paginatedData"> {{p.first}} {{p.last}} {{p.suffix}} </li> </ul> <button @click="prevPage"> Previous </button> <button @click="nextPage"> Next </button> </div> 

Quiero que los botones funcionen cuando solo tienen que hacerlo. Para el botón prevPage, agregaré :

: disabled = "pageNumber == 0"

y para el siguiente botón de página agregaré :

: disabled = "pageNumber> = pagecount -1"

Demostración de trabajo de mi componente:


A veces es difícil sobreestimar la situación, pero la paginación es una función simple que podemos ofrecer a nuestros usuarios sin mucho esfuerzo.

Gracias por leer!

Denny Headrick es un desarrollador web de USAF que ama demasiado su trabajo. Además de desarrollar en varias plataformas y Vue.js, cuando puede, le gusta bloguear ocasionalmente. Puedes seguirlo en Twitter en @dennythecoder.