• Langkah 1 - Membuat Proses Delete Data
• Langkah 2 - Uji Coba Delete Data
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara membuat proses edit dan update data di Vue 3 dan TypeScript menggunakan Rest API. Dan pada artikel kali ini kita semua akan belajar bagaimana cara membuat proses delete data di Vue 3 dan TypeScript menggunakan Rest API.

Langkah 1 - Membuat Proses Delete Data

Disini kita akan menambahkan sebuah function baru di dalam halaman products index, dimana function tersebut nantinya akan dipanggil jika button delete diklik.

Langsung saja, silahkan teman-teman buka file src/views/products/index.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini.

src/views/products/index.vue

<script setup lang="ts">

//import ref dan onMounted dari Vue
import { ref, onMounted } from "vue";

//import service api
import Api from "../../api";

// Interface Product
interface Product {
    id: number;
    image: string;
    title: string;
    description: string;
    price: number;
    stock: number;
}

// State products
const products = ref<Product[]>([]);

// Fetch data products dari API
const fetchDataProducts = async () => {
    try {

        //fetch data products dari API
        const response = await Api.get("/api/products");

        //set data products
        products.value = response.data.data.data;

    } catch (error) {

        //log error
        console.error("Error fetching products:", error);
    }
};

//run hook "onMounted"
onMounted(() => {

    //call method "fetchDataPosts"
    fetchDataProducts();
});

// Handle delete product
const deleteProduct = async (id: number) => {
  try {

    //delete product berdasarkan id
    await Api.delete(`/api/products/${id}`);

    //call method "fetchDataPosts"
    fetchDataProducts();

  } catch (error) {

    //log error
    console.error("Error deleting product:", error);
  }
};
</script>

<template>
    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-12">
                <router-link to="/products/create" class="btn btn-md btn-success rounded-5 shadow border-0 mb-3">
                    ADD NEW PRODUCT
                </router-link>
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-body">
                        <table class="table table-bordered">
                            <thead class="bg-dark text-white">
                                <tr>
                                    <th scope="col">Image</th>
                                    <th scope="col">Title</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Stock</th>
                                    <th scope="col" style="width: 15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-if="products.length === 0">
                                    <td colspan="6" class="text-center">
                                        <div class="alert alert-danger mb-0">No data available</div>
                                    </td>
                                </tr>
                                <tr v-for="product in products" :key="product.id">
                                    <td class="text-center">
                                        <img :src="product.image" :alt="product.title" width="200" class="rounded-3" />
                                    </td>
                                    <td>{{ product.title }}</td>
                                    <td>{{ product.description }}</td>
                                    <td>{{ product.price.toLocaleString('id-ID') }}</td>
                                    <td>{{ product.stock }}</td>
                                    <td class="text-center">
                                        <router-link :to="`/products/edit/${product.id}`"
                                            class="btn btn-sm btn-primary rounded-5 shadow border-0 me-2">
                                            EDIT
                                        </router-link>
                                        <button @click="deleteProduct(product.id)" class="btn btn-sm btn-danger rounded-5 shadow border-0">
                                            DELETE
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Dari perubahan kode di atas, pertama kita membuat function baru dengan nama deleteProduct.

Function ini akan dijalankan saat button delete diklik, karena di dalam button kita tambahkan event onClick yang mengarah ke dalam function tersebut.

<button @click="deleteProduct(product.id)" class="btn btn-sm btn-danger rounded-5 shadow border-0">
    DELETE
</button>

// Handle delete product
const deleteProduct = async (id: number) => {

	//...
	
}

Di dalam function di atas, kita melakukan delete data menggunakan Axios dengan method DELETE.

//delete product berdasarkan id
await Api.delete(`/api/products/${id}`);

Jika proses delete data berhasil dilakukan, maka kita panggil function fetchDataProducts. Tujuannya agar data yang ditampilkan diperbarui.

//call method "fetchDataPosts"
fetchDataProducts();

Langkah 2 - Uji Coba Delete Data

Sekarang silahkan teman-teman coba klik button DELETE di salah satu data yang dimiliki, jika berhasil maka kurang lebih seperti berikut ini.

Kesimpulan

Pada artikel kali ini kita semua telah belajar bagaimana cara melakukan proses delete data di dalam Vue 3 TypeScript menggunakan Axios dengan method DELETE.

Jika teman-teman ada kendala saat belajar, jangan ragu-ragu untuk bertanya melalui kolom komentar dibawah atau juga bisa melalui group Telegram dari SantriKoding.

Terima Kasih