Tutorial Laravel 8 dan Vue Js 3 #8: Delete Data di Vue Js


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR