Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bersama-sama bagaimana cara edit dan update data dengan Vue Js dan Composition API. Di artikel kali ini kita semua akan belajar bersama-sama bagaimana cara membuat proses delete data di dalam Vue Js.
Langkah 1 - Menambahkan Method Delete
Untuk membuat proses delete, kita hanya akan membuat 1 method baru di dalam view/component post index. SIlahkan buka file srv/views/post/Index.vue, kemudian tambahkan function berikut ini di dalam setup dan di bawah hook onMounted.
//method delete
function postDelete(id) {
//delete data post by ID
axios.delete(`http://localhost:8000/api/post/${id}`)
.then(() => {
//splice posts
posts.value.splice(posts.value.indexOf(id), 1);
}).catch(error => {
console.log(error.response.data)
})
}
Di atas, kita melakukan request ke API Laravel dengan parameter ID, dimana di dalam axios kita menggunakan method delete.
Setelah data berhasil di hapus di Laravel, maka selanjutnya kita lakukan splice data di dalam state posts berdasarkan ID post.
//splice posts
posts.value.splice(posts.value.indexOf(id), 1);
Kemudian, jangan lupa untuk menambahkan return untuk method postDelete.
//return
return {
posts,
postDelete
}
Terakhir, silahkan ubah button DELETE yang ada di dalam template.
<button class="btn btn-sm btn-danger ml-1">DELETE</button>
Silahkan ubah menjadi seperti berikut ini :
<button @click.prevent="postDelete(post.id)" class="btn btn-sm btn-danger ml-1">DELETE</button>
Di atas, kita tambahkan event @clik yang isinya akan mengarah ke dalam method postDelete dan di dalamnya kita parsing sebuah ID dari data post.
Langkah 2 - Uji Coba Delete Data
Sekarang, silahkan lakukan uji coba untuk menghapus data post, klik button DELETE, jika berhasil maka data akan terhapus, kurang lebih seperti berikut ini :
Di atas, data berhasil dihapus dan data posts kembali kosong. Sampai disini pembahasan tentang bagaimana cara membuat CRUD dengan Laravel dan Vue Js dengan menerapkan Composition API. Jika teman-teman ada pertanyaan atau problem bisa bertanya melalui kolom komentar.
Teman-teman juga bisa gabung di group telegram dari SantriKoding di : https://t.me/santrikoding
Terima Kasih.
EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue
EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire