Paginación VUEjs y LARAVEL Computed Property - Parte 2

↑ Me gusta (0)

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándonos específicamente en la programación de la paginación y sus propiedades de acción. En el video anterior realizamos una programación para el listado de los datos y otra para la parte de la paginación dentro del controlador. Es por eso que desde el método index() retornamos dos arreglos diferentes, el array tasks que ya configuramos en el video anterior y el array paginate que es el que vamos a utilizar en esta ocasión.

El api o controlador en este caso ya está preparado para que nos consiga los datos que necesitamos y que vamos a utilizar en el código vue. Por esto lo dejamos tal como está y realizamos la programación en el archivo javascript de nuestro proyecto.

 

Código Vue

Abrimos el archivo resources\assets\js\app.js y dentro de su llave data{}, agregamos una nueva llave pagination{}, dentro de esto tenemos que definir una a una las diferentes llaves a recibir desde el controlador, es decir total, current_page, per_page, last_page, from y to.

Hay que tener claro que todas estas variables van a estar inicialmente con el valor 0, pero cuando se comunique la aplicación Vue con el Api, cada uno de estos valores van a cambiar por los obtenidos del array pagination.

<script>
data: {
    pagination: {
        'total': 0,
        'current_page': 0,
        'per_page': 0,
        'last_page': 0,
        'from': 0,
        'to': 0
    },
},
</script>

Para llenar las llaves configuradas en el pagination{} de la instancia data, agregamos una nueva línea al método getKeeps() dentro de su función Axios. A la variable this.pagination le asignamos response.data.pagination con el cual accedemos a los datos conseguidos del array pagination desde del controlador.

<script>
getKeeps: function(page) {
    var urlKeeps = 'tasks?page='+page;
    axios.get(urlKeeps).then(response => {
        this.keeps = response.data.tasks.data,
        this.pagination = response.data.pagination
    });
},
</script>

 

Propiedades computadas

Para finalizar con esta parte de la paginación, tenemos que preparar dos propiedades computadas y que ya conocemos gracias al curso de VUEjs versión 2.

Creamos la llave computed{} y dentro de esta agregamos la propiedad isActived, que va a cumplir con la finalidad de determinar en qué página estamos situados, es decir si estamos en la página 1 el botón obtenga la clase actived y se pinte de un color diferente.

Con esta propiedad vamos a retornar el valor de la variable current_page, con el número de la página actual en que se está situado.

La siguiente propiedad que debemos crear será pagesNumber para hacer referencia al número de página o calcular los elementos que van aparecer en pantalla, es decir, si tenemos muchos registros esta propiedad va a crear los números de páginas necesarios según la cantidad de registros y de forma dinámica.

<script>
computed: {
    isActived: function() {
        return this.pagination.current_page;
    },
    pagesNumber: function() {
        if(!this.pagination.to){
				return [];
			}
},
</script>

En el siguiente video continuaremos con la programación necesaria para la propiedad pagesNumber ya que esta es un poco más compleja y tenemos que explicarla más a detalle. Por ahora, hemos realizado la preparación necesaria de las propiedades a utilizar para el diseño de nuestra paginación y que en el siguiente vamos a seguir configurando.

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...

Libro de Laravel Engineer Compra el libro Laravel Engineer