Create a list in Vue 3 with the o-table component Oruga UI, Rest Api in Laravel

- Andrés Cruz

En español
Create a list in Vue 3 with the o-table component Oruga UI, Rest Api in Laravel

Create a list in Vue 3 with the o-table component Oruga UI, Rest Api in Laravel

We are going to build the necessary template to create a list of elements, in this case 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>

As you can see in the code above, we just put in posts as one more parameter, there's no need to use a v-for to iterate through each element, otherwise we use an o-table-column component to create each one of the items of our element.

We don't reference the item directly, otherwise we first map to the v-slot and then access the item along with additional row data.

Get the data

To get the data for the previous list, it is typical, a property called posts, to manage the posts, and then an axios request when launching the application:

<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>

We have an additional property to know if the table data is being loaded or not.

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.

!Cursos a!

10$

En Udemy

Quedan 0 días!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
!Web Alojada en Hostinger!