Tutorial CRUD Laravel 7 & Vue JS #6 : Proses Hapus Data


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial CRUD Laravel 7 & Vue JS  #6 : Proses Hapus Data

Tutorial CRUD Laravel 7 & Vue JS #6 : Proses Hapus Data - Halo teman-teman semuanya, pada kesempatan kali ini kita akan membuat proses mengahpus data dari database menggunakan Vues JS dengan API yang sudah kita buat sebelumnya menggunakan Laravel.

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 Index.vue

Langkah 1 - Menambahkan Fungsi Hapus Data

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

<script>
    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            let uri = `http://localhost:8000/api/posts`;
            this.axios.get(uri).then(response => {
                this.posts = response.data.data;
            });
        },
        methods: {
            PostDelete(id, index)
            {
                this.axios.delete(`http://localhost:8000/api/posts/${id}`)
                    .then(response => {
                        this.posts.splice(index, 1);
                    }).catch(error => {
                    alert('system error!');
                });
            }
        }
    }
</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)
{
   this.axios.delete(`http://localhost:8000/api/posts/${id}`)
        .then(response => {
            this.posts.splice(index, 1);
         }).catch(error => {
             alert('system error!');
         });
}

Langkah 2 - Compile JavaScript

Terakhir, sebelum kita meilihat project kita, kita harus melakukan proses compile atau bundle file-file Vue JS kita ke dalam file app.js dengan bantuan Laravel MIX.

Silahkan teman-teman jalankan perintah di bawah ini untuk melakukan compile atau bundle :

npm run watch

Silahkan tunggu proses sampai selesai, ini akan memakan waktu lebih lama karena akan mengcompile semua file-file Vue dan JavaScript kita.

Langkah 3 - Mencoba Menjalankan Aplikasi

Oke, setelah proses compile selesai, silahkan sekarang teman-teman bisa jalankan laravel built in servernya dengan cara :

php artisan server

Sekang teman-teman bisa mencoba aplikasi dengan menghapus beberapa data yang sudah pernah di masukkan ke dalam database.

KESIMPULAN

Pada artikel kali ini kita semua sudah berhasil membuat proses hapus data dari database menggunakan API di Vue JS

Untuk teman-teman yang masih bingung atau error saat mencobanya, silahkan bisa bertanya melalui kolom komentar di setiap artikel.

Terima Kasih.


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. 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