Paginacion Con Vue.js y Laravel-Eloquent

Paginacion Con Vue.js y Laravel-Eloquent

La paginación en vue es bastante simple, aprovechando las herramientas de laravel claro esta. El objetivo de cada post es conocer como aprovechar lo bueno de cada framework, ya sea front-end o back-end, y unirlos para dar soluciones practicas.

Comenzaremos asumiendo que vamos a cargar los datos con  un ajax al evento ready de la pagina, por lo tanto nuestro método vue y controlador quedaran así. Primeramente el el controlador:

1

2

3

4

5

6

7

8

9

10

use App\Producto;

class ProductosController extends Controller

{

public function Tiendas_productos()

{

$productos = Producto::with("empresa")->where("id",">",0)->paginate(6);

echo json_encode($productos);

 

}

}

nuestro código vue seria el siguiente:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

var vue_ini= new Vue({

el: '#app',

data:{

paginas:[],

ultima_pagina :1;

 

productos: [],

},

methods: {

Carga_prductos: function()

{

    axios({

    method: 'Get',

    responseType:'json',

    url: 'Productos/Tiendas_productos',

    }).then(response => {

    this.productos= response.data.data;

    this.ultima_pagina = response.data.last_page;

    this.Crear_paginas();

        });

},

Crear_paginas: function() {

for(var x= 1; x <= this.ultima_pagina; x=x+1){

        if(x===1){

             this.paginas.push({ubicacion: x, clase: "bg-success"})

        }else{

             this.paginas.push({ubicacion: x, clase: ""})

        }

 

 

    }

}

},

beforeMount: function(){

this.Carga_prductos()

 

}

 

});

Luego Renderizamos los productos cargados y también la cantidad de paginas generadas, quedaría por lo tanto así:

primero todos los productos

1

2

3

4

5

6

<div class="col-md-4" style="margin-top: 10px" v-for="(producto, index) in productos" >

 

 

<p><strong> @{{ producto.Nombre }} </strong> </p>

 

</div>

ahora las paginas generadas, acá asociaremos cada uno de estas paginas al evento click, el cual actualizara los datos mediante un ajax

1

2

3

4

5

6

7

<ul>

<li    v-for="(pagina, index) in paginas" >

    <a v-bind:class="pagina.clase" v-on:click="click_page(index,pagina)" >

           @{{pagina.ubicacion}}

    </a>

</li>

</ul>

ahora crearemos la función asociada al evento click de cada una de las paginas

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

click_page: function(index,pagina){

                this.paginas.filter(function(elem) {

                    elem.clase = ""

                });

//borramos la clase bg-succes para remarcar la otra pagina seleccionada

               axios({

                   method: 'Get',

                   responseType:'json',

                   url: "Productos/Tiendas_carga?page="+pagina.ubicacion+""

               }).then(response => {

                   this.paginas[index].clase="bg-success";

                   this.usuarios = response.data.data

 

           });

 

           }