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