Tutorial Vue JS & Restful API Lumen #9 : Hapus Data di Vue JS


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

Tutorial Vue JS & Restful API Lumen #9 : Hapus Data di Vue JS - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat proses delete data atau hapus data di Vue JS.

Di artikel sebelumnya kita semua sudah belajar bagaimana cara meng-edit dan meng-update data di Vue JS. Maka pada kesempatan kali ini kita semua akan belajar tentang bagaimana cara membuat hapus data.

Untuk membuat proses hapus data dari database di Vue JS ini sangatlah sederhana dan gampang sekali, kita tinggal membuat sebuah fungsi baru saja di dalam component src/components/posts/Index.vue

Langkah 1 - Menambah Fungsi Hapus Data

Langsung saja kita mulai, silahkan teman-teman buka file src/components/posts/Index.vue, silahkan ubah kode di bagian javascripnya menjadi seperti berikut ini :

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            axios.get('http://localhost:8000/posts').then(response => {
                this.posts = response.data.data;
            });
        },
        methods: {
            PostDelete(id)
            {
                axios.delete(`http://localhost:8000/posts/${id}`)
                    .then(response => {
                        this.posts.splice(this.posts.indexOf(id), 1);
                        console.log(response);
                    }).catch(error => {
                    console.log(error.response);
                });
            }
        }

    }
</script>

Dari perubahan kode di atas, teman-teman bisa melihat kita menambahkan sebuah fungsi baru di dalam methods yaitu PostDelete( ), kurang lebih seperti berikut ini :

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

Langkah 2 - Mencoba Menjalankan Aplikasi

Sekarang, silahkan teman-teman jalankan project Vue JS dengan cara menjalankan perintah :

npm run serve

Sampai disini pembahasan tentang bagaimana cara hapus data dari Restful API di Vue JS dari Lumen.

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