Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bersama-sama bagaimana cara membuat proses edit dan update data ke dalam database menggunakan Nuxt Js dan Rest API. Di artikel kali ini kita semua akan belajar bagaimana cara menghapus data di Nuxt Js.
Langkah 1 - Menambahkan Button Delete
Pertama kita akan menambahkan button delete terlebih dahulu di dalam halaman index post, silahkan buka file pages/post/index.vue kemudian cari kode berikut ini :
<template v-slot:cell(actions)="row">
<b-button :to="{name: 'post-edit-id', params: {id: row.item.id}}" variant="warning" size="sm">EDIT
</b-button>
</template>
Kemudian ubah menjadi seperti berikut ini :
<template v-slot:cell(actions)="row">
<b-button :to="{name: 'post-edit-id', params: {id: row.item.id}}" variant="warning" size="sm">EDIT
</b-button>
<b-button variant="danger" size="sm" @click="deletePost(row)">DELETE</b-button>
</template>
Di atas kita menambahkan 1 button baru untuk proses delete data, dimana di dalam button tersebut kita berikan event @click yang mengarah ke dalam method yang bernama deletePost dan di dalamnya kita berikan parameter row. Parameter row tersebut berisi index array, dan juga data post.
Langkah 2 - Menambahkan Method deletePost
Setelah berhasil menambahkan button untuk proses delete post, sekarang kita lanjutkan untuk membuat method deletePost yang mana method ini akan kita gunakan untuk melakukan proses delete data ke dalam database melalui Rest API.
Masih di dalam file yang sama yaitu pages/post/index.vue pada bagian JavaScript silahkan ubah menjadi seperti berikut ini :
<script>
export default {
data() {
return {
//header table
fields: ['title', 'content', 'actions'],
//posts data
posts: [],
}
},
mounted() {
//fething ke Rest API
this.$axios.get('/api/posts')
.then(response => {
//assign response ke state "posts"
this.posts = response.data.data
})
.catch(error => {
console.log(error.response.data)
})
},
methods: {
async deletePost(row) {
//delete data post by ID
await this.$axios.delete(`/api/posts/${row.item.id}`)
.then(() => {
//remove item array by index
this.posts.splice(row.index, 1);
})
}
}
}
</script>
Di atas kita menambahkan properti methods yang di dalamnya kita buat method baru dengan nama deletePost, dimana methos tersebut akan dijalankan jika button ddelete di klik.
Di dalam method deletePost pertama kita melakukan delete data ke dalam endpoint Rest API berdasarkan ID post yang di dapatkan dari row.item.id.
Dan jika proses delete data berhasil, maka kita juga akan melakukan splice atau menghapus item array berdasarkan index dari array tersebut.
//remove item array by index
this.posts.splice(row.index, 1);
Sekarang silahkan uji coba jalankan proses delete data dan jika berhasil kurang lebih seperti berikut ini :
Sampai disini pembahasan bagaimana cara membuat CRUD dengan Laravel dan Juga Nuxt Js, jika teman-teman mengalami kendala saat praktek bisa bertanya melalui kolom komentar arau bisa bertanya melalui group telegram yang disediakan oleh SantriKoding.
SOURCE CODE :
Terima Kasih