Breaking

Post Top Ad

Your Ad Spot

jueves, 21 de noviembre de 2019

Paginación Laravel Vue Sin Webpack

Recientemente apliqué Vue.js solo mi aplicación Laravel . Durante ese tiempo, enfrenté un problema para mostrar la paginación usando vue. Luego hago una solución y comparto aquí. Por favor, no es que no use webpack en esta aplicación. Piensa que mostraremos toda la lista de usuarios en una página con paginación. Entonces, primero eche un vistazo a las rutas
Ruta :: get ('/ user', function () {
    vista de retorno ('usuario / índice');
});

Ruta :: get ('/ user / json', function () {
    volver App \ User :: paginate (5);
});

En esas 2 rutas, la primera se usará para mostrar una página de vista y la segunda se usará para responder datos es json
Deje ir a la página de vista. Primero habrá una tabla para mostrar la información del usuario. Al final de la tabla tiene el número de paginación. Estoy planeando usar componentes vue para mostrar la paginación, qué componente puedo reutilizar en toda mi aplicación. También debemos enviar una solicitud al servidor para obtener información del usuario sobre json. Yo uso axios para enviar solicitudes al servidor. Entonces tenemos que incluir 4 archivos. Uno es para vue otro es para axios, uno es para componente y otro es app js. Como abajo
<script src = "axios.min.js"> </script>
<script src = "vue.min.js"> </script>
<script type = "module" src = "VuePagination-component.js"> </script>
<script type = "module" src = "app.js"> </script>
Preparo mis componentes de paginación vue como a continuación
exportación predeterminada {
accesorios : {
paginación : {
tipo : objeto ,
requerido : verdadero
},
desplazamiento : {
tipo : Número ,
predeterminado : 4
}
},
plantilla : ' <ul class = "pagination" v-if = "pagination.last_page! = 1"> \ n ' +
' <li v-if = "pagination.current_page> 1"> \ n ' +
' <a href="javascript:void(0)" aria-label="Previous" @click.prevent="changePage(pagination.current_page-1)"> \ n ' +
' <span aria-hidden = "true"> «</span> \ n ' +
' </a> \ n ' +
' </li> \ n ' +
' <li v-for = "page in pagesNumber": class = "{ \' active \ ' : page == pagination.current_page}"> \ n ' +
' <a href="javascript:void(0)" @click.prevent="changePage(page)"> {{page}} </a> \ n ' +
' </li> \ n ' +
' <li v-if = "pagination.current_page <pagination.last_page"> \ n ' +
' <a href="javascript:void(0)" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)"> \ n ' +
' <span aria-hidden = "true"> »</span> \ n ' +
' </a> \ n ' +
' </li> \ n ' +
' </ul> ' ,
calculado : {
pagesNumber () {
if ( ! this . pagination . to ) {
volver [];
}
dejar de = esto . paginación . current_page : esto . compensado ;
si (de < 1 ) {
de = 1 ;
}
let to = from + ( this . offset * 2 );
if (to > = this . pagination . last_page ) {
a = esto . paginación . last_page ;
}
let pagesArray = [];
for ( let page = from; page <= to; page ++ ) {
páginasArray . empujar (página);
}
volver páginas Array;
}
},
métodos : {
changePage ( página ) {
esta . paginación . current_page = página;
esta . $ emit ( ' paginate ' );
}
}
}
y mi aplicación js es como a continuación
importar VuePagination desde ' VuePagination-component.js ' ;
nuevo Vue ({
el : " #userTable " ,
datos : {
usuarios : {
página_corriente : 1
},
},
componentes : {
VuePagination
},
métodos : {
allUser () {
axios . get ( ' usuario / json ' , {
parámetros : {
página : esto . parcelas . página actual
}
}).
entonces ( respuesta => esto . usuarios = respuesta . datos );
}
},
creado () {
esta . allUser ();
}
});
ver primasapp.js alojados con ❤por GitHub
¡Excelente! Esta casi terminado
Ahora use el componente como a continuación
<vue -pagination: pagination = "parcels"
 @ paginate = "allUser ()"> </vue>
Se hace. Ahora podemos usar este componente de paginación donde sea que lo necesitemos.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas