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.