【Nuxt3】ちょっとしたタスク管理アプリを作ってみる(削除編)

サンプルイメージ

前回記事↓につづいて、今回はDelete(削除)の機能を作ってみたいと思います。

サンプルファイルはこちら↓

【画面の操作手順】

①一覧画面の削除対象(赤枠の箇所)の右端にある削除ボタンをクリックします

②削除画面で内容を確認したら、削除するボタンをクリックします。

※削除ボタンを押下する前のデータベースの中身です。

削除して一覧画面に戻ると対象のデータが削除されます。

※データベースも対象のデータが削除されていることがわかります。

画面側(delete.vue)のコード

①ちょっとした工夫ポイント$roter.push

削除画面から一覧画面に遷移できるように一覧に戻るボタンを設置し。
$routerオブジェクトで戻り先のURLを指定しています。

delete.vue

<button type="button" @click="$router.push('/')" class="bg-green-500 text-white font-bold rounded-lg px-4 py-4 mt-4">一覧に戻る</button>

②ちょっとした工夫ポイントTailwind CSS

ボタン感の間隔をちょっとだけスペースを空けるためにmtプロパティを付与しています。

mtプロパティとは？
オブジェクトの外側の余白のことを指します。

mt-(size) ←← margin-topのこと
mr-(size) ←← margin-rightのこと

(実際の書き方の例)
mt-4 ←← 上部の余白を空ける
mr-4 ←← 右側の余白を空ける

全体のコードはこちら↓

delete.vue

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute();

const taskId = route.query.id as number;
const { data:task,error } = await useAsyncData('taskDelete',()=>$fetch(`/api/selectTargetItem?id=${taskId}`));
console.log("取得した削除対象のデータは、" + task);

const handleDeleteData = async(e:Event)=>{
    await useFetch('/api/delete',{
        method:'POST',
        body:{
            id:taskId,
        }
    })
}

</script>
<template>
    <div>
        <div class="flex items-center justify-center">
            <table class="border border-gray-500">
                <thead>
                    <tr>
                        <th class="border border-gray-500 px-4 py-4">ID</th>
                        <th class="border border-gray-500 px-4 py-4">タスク名</th>
                        <th class="border border-gray-500 px-4 py-4">進捗</th>
                        <th class="border border-gray-500 px-4 py-4">更新日時</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-gray-500 px-4 py-4">{{task.id}}</td>
                        <td class="border border-gray-500 px-4 py-4">{{task.task}}</td>
                        <td class="border border-gray-500 px-4 py-4">{{task.completed}}</td>
                        <td class="border border-gray-500 px-4 py-4">{{task.created_at}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <form @submit.prevent="handleDeleteData" class="flex justify-center">
            <input type="hidden" v-model="task.id" id="taskId"/>
            <div>
                <button type="submit" class="bg-red-500 text-white font-bold px-4 py-4 rounded-lg mt-4 mr-4">削除する</button>
                <button type="button" @click="$router.push('/')" class="bg-green-500 text-white font-bold rounded-lg px-4 py-4 mt-4">一覧に戻る</button>
            </div>
        </form>
    </div>
</template>

サーバ側(delete.ts)のコード

ORMマッパーPrismaからデータベースアクセスする前に、task idをNumber型に変換しています。

server/api/delete.ts

        await prisma.task.delete({
            where:{
                id:Number(body["id"]),
            }
        })

全体のコードはこちら↓

server/api/delete.ts

import { PrismaClient } from "@prisma/client";

interface RequestBody{
    id:number
}

export default defineEventHandler(async(event)=>{
    const prisma = new PrismaClient();
    const body:RequestBody = await readBody(event);
    let deleteFlag:boolean = false;
    console.log("削除対象のタスクIDは、" + JSON.stringify(body))
    console.log("削除対象のタスクIDは、" + body["id"])
    
    try{
        await prisma.task.delete({
            where:{
                id:Number(body["id"]),
            }
        })
        console.log("削除完了しました。");
        deleteFlag = true;
        return deleteFlag;
    }catch(error){
        console.log("削除失敗しました。");
        return deleteFlag;
    }
    
})

以上です。

参考にした記事