Crear un listado en Vue 3 con el componente o-table Oruga UI, Rest Api en Laravel

- Andrés Cruz

In english
Crear un listado en Vue 3 con el componente o-table Oruga UI, Rest Api en Laravel

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

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.