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