Tutorial CRUD CodeIgniter 4 & Vue JS #11 - Hapus Data di Vue Js


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat hapus data di Vue Js menggunakan Rest API yang sudah kita buat di CodeIgniter.

Jadi konsepnya kita hanya akan menambahkan 1 method di dalam component index post, yang mana di dalam method ini kita akan akan mengirimkan sebuah data yang ingin di hapus dengan endpoint yang memiliki method DELETE.

Langkah 1 - Menambahkan Fungsi Hapus Data

Silahkan teman-teman buka file src/components/posts/Index.vue kemudian pada bagian kode JavaScript ubahlah menjadi seperti berikut ini :

<script>
    import axios from 'axios'

    export default {

        data() {
            return {
                posts: []
            }
        },
        created() {
            axios.get('http://localhost:8080/api/post').then(response => {
                this.posts = response.data.data;
            });
        },
        methods: {
            PostDelete(id, index)
            {
                axios.delete(`http://localhost:8080/api/post/${id}`)
                    .then(response => {
                        this.posts.splice(index, 1);
                        console.log(response);
                    }).catch(error => {
                    console.log(error.response);
                });
            }
        }
    }
</script>

Jadi di atas kita menambahkan method baru dengan nama PostDelete dan di dalamnya menggunakan parameter ID dari data post dan index dari urutan data. Kemudian kita melakukan hapus data dengan endpoint API menggunakan method DELETE dan jika berhasil maka data posts akan di splice berdasarkan index.

PostDelete(id, index)
{
  axios.delete(`http://localhost:8080/api/post/${id}`)
     .then(response => {
         this.posts.splice(index, 1);
         console.log(response);
      }).catch(error => {
         console.log(error.response);
  });
}

Langkah 2 - Menjalankan Project Vue Js

Sekarang silahkan jalankan projectnya dan coba hapus data, maka secara otomatis data akan terhapus dari database. Sampai disini pembahasan tentang bagaimana cara hapus data dari Restful API di Vue JS dari CodeIgniter.

Source Code

CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API

Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter

Jika ada pertanyaan silahkan teman-teman bisa bertanya melalui kolom komentar dibawah.

Terima Kasih


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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

KOMENTAR