Tutorial Vue.js dan Express.js #7 : Delete Data di Vue.js


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at 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

KOMENTAR