Crear un listado en Vue 3 con el componente o-table Oruga UI, Rest Api en Laravel
Vamos a construir el template necesario para crear un listado de elementos, en este caso post:
<template>
<div>
<h1>Listado de Post</h1>
<o-table
:loading="isLoading"
:data="posts.current_page && posts.data.length == 0 ? [] : posts.data"
>
<o-table-column field="id" label="ID" numeric v-slot="p">
{{ p.row.id }}
</o-table-column>
<o-table-column field="title" label="Título" v-slot="p">
{{ p.row.title }}
</o-table-column>
<o-table-column field="posted" label="Posteado" v-slot="p">
{{ p.row.posted }}
</o-table-column>
<o-table-column field="created_at" label="Fecha" v-slot="p">
{{ p.row.created_at }}
</o-table-column>
<o-table-column field="category" label="Categoría" v-slot="p">
{{ p.row.category.title }}
</o-table-column>
</o-table>
</div>
</template>Como puedes ver en el código anterior, simplemente colocamos en posts como un parámetro más, no hay necesidad de utilizar un v-for para iterar cada uno de los elementos, por lo demás, usamos un componente de o-table-column para crear cada uno de los items de nuestro elemento.
No referenciamos directamente el item, si no, primero se hace un mapeo con el v-slot y luego accedemos al item junto con datos adicionales del row.
Obtener los datos
Para obtener los datos para el listado anterior, es lo típico, una propiedad llamada posts, para administrar los post, y luego una petición axios al momento de levantar la aplicación:
<script>
export default {
data() {
return {
posts: [],
isLoading: true,
};
},
async mounted() {
this.$axios.get("/api/post?page="+this.currentPage).then((res) => {
this.posts = res.data;
console.log(this.posts);
this.isLoading = false;
});
},
};
</script>Tenemos una propiedad adicional para saber si se está cargando los datos de la tabla o no.
- Andrés Cruz
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter