Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara melakukan proses edit dan update data di dalam Vue.js dengan Rest API yang dibuat di Express.js. Sekarang kita akan lanjutkan belajar bagaimana cara membuat proses delete data di dalam Vue.js.
Langkah 1 - Menambahkan Button Delete
Pertama, kita akan menambahkan 1 button terlebih dahulu untuk proses delete dan kita akan menambahkan di halaman post index. Silahkan buka file src/views/posts/Index.vue, kemudian cari kode berikut ini :
<tr v-for="(post, index) in posts" :key="index">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'posts.edit', params:{id: post.id }}" class="btn btn-sm btn-primary me-2">EDIT</router-link>
</td>
</tr>
Kemudian, ubah kode-nya menjadi seperti berikut ini :
<tr v-for="(post, index) in posts" :key="index">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'posts.edit', params:{id: post.id }}" class="btn btn-sm btn-primary me-2">EDIT</router-link>
<button @click.prevent="postDelete(post.id)" class="btn btn-sm btn-danger ml-1">DELETE</button>
</td>
</tr>
Di atas, kita menambahkan 1 button baru dengan nama DELETE di dalam di dalamnya kita menambahkan sebuah event @click yang kita arahkan ke dalam method / function yang bernama postDelete dan kita berikan parameter berupa ID dari data post.
Sekarang, jika kita lihat di halaman post index, maka kita akan mendapatkan tampilan seperti berikut ini :
Di atas, kita berhasil menampilkan button delete di dalam halaman post index.
Langkah 2 - Menambahkan Method / Function postDelete
Setelah berhasil menambahkan button delete, sekarang kita akan lanjutkan untuk menambahkan method / function yang bernama postDelete, dimana function ini yang akan dijalankan ketika button delete di klik.
Silahkan buka file src/views/posts/Index.vue, kemudian tambahkan function berikut ini tepat di bawah function getDataPosts.
// function "postDelete"
function postDelete(id) {
//delete data post by ID
axios.delete(`http://localhost:3000/api/posts/delete/${id}`)
.then(() => {
//panggil function "getDataPosts"
getDataPosts()
}).catch(error => {
console.log(error.response.data)
})
}
Di atas, kita melakukan HTTP request menggunakan Axios dengan method DELETE ke dalam endpoint http://localhost:3000/api/posts/delete/:id.
//delete data post by ID
axios.delete(`http://localhost:3000/api/posts/delete/${id}`)
Jika dari proses delete data berhasil dilakukan, maka kita akan memanggil function getDataPosts dengan tujuan agar melakukan fetching ulang dengan data yang telah diperbarui.
Dan jangan lupa, tambahkan juga function postDelete di dalam return, tujuannya agar function tersebut dapat digunakan di dalam template.
//return
return {
posts,
getDataPosts,
postDelete // <-- function "postDelete"
}
Langkah 3 - Uji Coba Proses Delete
Sekarang kita akan mencoba melakukan proses uji coba delete data. Silahkan klik salah satu data di halaman post index, jika berhasil maka akan hilang dan kurang lebih seperti berikut ini :
Sampai disini pembahasan bagaimana cara membuat proses delete data di dalam Vue.js dengan Rest API yang dibuat di dalam Express.js. Jika ada problem atau kesalahan saat mengikuti materinya, silahkan bisa bertanya melalui kolom komentar di bawah atau bisa bertanya melalui group telegram SantriKoding.
Terima Kasih