Delete a record in Vue 3 and Oruga UI

- Andrés Cruz

En español

Delete a record in Vue 3 and Oruga UI

For the paginated list in Vue built on previous posts, we define the function to delete a post or records:

  deletePost(row) {
      this.posts.data.splice(row.index,1)
      console.log(row);
      this.$axios.delete("/api/post/"+row.row.id);
    },

And the action on the OrugaUI table or component

<o-table-column field="slug" label="Acciones" v-slot="p">
    <router-link :to="{ name: 'save', params: { slug: p.row.slug } }"
      >Editar</router-link
    >
    <o-button variant="danger" @click="deletePost(p)"
      >Eliminar</o-button
    >
  </o-table-column>

With this, we can delete records directly from the table in Oruga UI.

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.