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

• Langkah 1 - Menambahkan Method Delete Post
• Langkah 2 - Uji Coba Delete Data Posts

Halo teman-teman semuanya, pada artikel terakhir ini kita semua akan belajar bagaimana cara melakukan proses delete data di Vue 3 menggunakan Rest API yang dibuat menggunakan Laravel. Disini kita hanya menambahkan 1 method saja pada halaman posts index untuk proses delete data.

Langkah 1 - Menambahkan Method Delete Post

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

<script setup>

    //import ref and onMounted
    import { ref, onMounted } from 'vue';

    //import api
    import api from '../../api';

    //define state
    const posts = ref([]);

    //method fetchDataPosts
    const fetchDataPosts = async () => {

        //fetch data 
        await api.get('/api/posts')

        .then(response => {

            //set response data to state "posts"
            posts.value = response.data.data.data

        });
    }

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

        //call method "fetchDataPosts"
        fetchDataPosts();
    });
    
    //method deletePost
    const deletePost = async (id) => {

        //delete post with API
        await api.delete(`/api/posts/${id}`)
        .then(() => {

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

    };

</script>

<template>
    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-12">
                <router-link :to="{ name: 'posts.create' }" class="btn btn-md btn-success rounded shadow border-0 mb-3">ADD NEW POST</router-link>
                <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-if="posts.length == 0">
                                    <td colspan="4" class="text-center">
                                        <div class="alert alert-danger mb-0">
                                            Data Belum Tersedia!
                                        </div>
                                    </td>
                                </tr>
                                <tr v-else v-for="(post, index) in posts" :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">
                                        <router-link :to="{ name: 'posts.edit', params:{id: post.id} }" class="btn btn-sm btn-primary rounded-sm shadow border-0 me-2">EDIT</router-link>
                                        <button @click.prevent="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 menambahkan method baru dengan nama deletePost. Method tersebut akan dijalankan ketika button DELETE diklik.

<button @click.prevent="deletePost(post.id)" class="btn btn-sm btn-danger rounded-sm shadow border-0">DELETE</button>

Karena pada button tersebut, kita berikan event @click yang mengarah ke method deletePost dengan mengirimkan parameter post ID.

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

	//...
	
}

Di dalam method di atas, kita melakukan proses delete data menggunakan Rest API ke endpoint /api/posts/:id dengan method DELETE.

//delete post with API
await api.delete(`/api/posts/${id}`)

Jika proses delete data berhasil dilakukan, selanjutnya adalah melakukan fetching ulang data-nya dengan cara memanggil method fetchDataPosts.

//call method "fetchDataPosts"
fetchDataPosts();

Langkah 2 - Uji Coba Delete Data Posts

Silahkan teman-teman klik button DELETE, jika berhasil maka data akan dihapus dari backend dan database. Kurang lebih seperti berikut ini.

Kurang lebih seperti itu bagaimana cara melakukan proses delete data di Vue 3 menggunakan Rest API. Jika teman-teman ada kendala saat belajar silahkan bisa bertanya melalui kolom komentar atau bisa juga melalui public group Telegram dari SantriKoding.

SOURCE CODE :

Terima Kasih

• Membangun Aplikasi Kasir (Point of Sales) dengan Laravel, Inertia.js dan Vue.js : https://bit.ly/laravel-inertia-vue
• Membangun Website Toko Online Dengan Laravel, Inertia.js & React.js : https://bit.ly/toko-online-laravel-inertia-react