Tutorial Nuxt 3 dan Laravel 10 #6 : Delete Data Dengan Rest API di Nuxt 3


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Nuxt 3 dan Laravel 10 #6 : Delete Data Dengan Rest API di Nuxt 3

Halo teman-teman semuanya, pada artikel sebelumnya kita telah berhasil melakukan proses edit dan update data di dalam Nuxt 3 dan sekarang kita akan lanjutkan belajar membuat proses delete data di dalam Nuxt 3 menggunakan Rest API.

Langkah 1 - Membuat Method Delete

Disini kita hanya akan menambahkan sebuah method baru di dalam halaman posts index, meethod ini digunakan untuk menghapus data berdasarkan ID yang dikirimkan.

Silahkan buka file pages/posts/index.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini.

<script setup lang="ts">

    //meta title
    useHead({
        title: 'Data Posts - SantriKoding.com',
    });

    //init config
    const config = useRuntimeConfig();

    //fetch data from API with "useAsyncData"
    const { data: posts } : any = await useAsyncData('posts', () => $fetch(`${config.public.apiBase}/api/posts`))

    //method deletePost
    const deletePost = async (id: number) => {

        //delete data with API
        await $fetch(`${config.public.apiBase}/api/posts/${id}`, {

            //method
            method: 'DELETE'
        });

        //refersh data posts
        refreshNuxtData('posts');
    }

</script>

<template>
    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-12">
                <NuxtLink to="/posts/create" class="btn btn-md btn-success rounded shadow border-0 mb-3">ADD NEW POST</NuxtLink>
                <div class="card border-0 rounded 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">Content</th>
                                    <th scope="col" style="width:15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(post, index) in posts.data.data" :key="index">
                                    <td class="text-center">
                                        <img :src="post.image" width="200" class="rounded-3"/>
                                    </td>
                                    <td>{{ post.title }}</td>
                                    <td>{{ post.content }}</td>
                                    <td class="text-center">
                                        <NuxtLink :to="`/posts/edit/${post.id}`" class="btn btn-sm btn-primary rounded-sm shadow border-0 me-2">EDIT</NuxtLink>
                                        <button @click="deletePost(post.id)" class="btn btn-sm btn-danger rounded-sm shadow border-0">DELETE</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Dari perubahan kode di atas, kita membuat method baru dengan nama deletePost. Dan method tersebut akan dijalankan ketika button DELETE diklik.

<button @click="deletePost(post.id)" class="btn btn-sm btn-danger rounded-sm shadow border-0">DELETE</button>
//method deletePost
const deletePost = async (id: number) => {

	//...
	
}

Di dalam method di atas, kita melakukan fetch untuk proses delete data berdasarkan ID yang diambil dari parameter.

//delete data with API
await $fetch(`${config.public.apiBase}/api/posts/${id}`, {

    //method
    method: 'DELETE'
});

Jika proses delete data berhasil dilakukan, maka kita akan lakukan refresh data yang ada di dalam key posts.

//refersh data posts
refreshNuxtData('posts');

Langkah 2 - Uji Coba Delete Data Post

Silahkan teman-teman klik button DELETE di salah satu data yang dimiliki, jika berhasil maka data akan dihapus dari database.

Kurang lebih seperti itu bagaimana cara melakukan proses delete data di dalam Nuxt 3 menggunakan Rest API.

Dan saya kira cukup untuk seri artikel Nuxt 3 kali ini, jika teman-teman mengalami kendala saat belajar, silahkan bisa bertanya melalui kolom komentar atau group Telegram dari SatriKoding.

SOURCE CODE : https://github.com/SantriKoding-com/NUXT-3-CRUD

Terima Kasih



Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder 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