【Nuxt3】ちょっとしたタスク管理アプリを作ってみる(編集から更新まで)

# サンプルイメージ
<b>前回の記事↓</b>では、編集画面の表示までをしていました。
なので、この記事ではデータベース(PostgreSQL)への登録までをゴールとした内容になっています。


https://qiita.com/SKY-HaYaTo/items/d6edf65ebecd5524471e

<b>【画面の操作手順】</b>
<b>①一覧画面で編集対象のタスクを選択します</b>
![vue5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/83d4d8ba-ed86-cd7b-719c-73861fa597c8.png)

<b>②編集画面でタスク内容を修正して、「更新」ボタンを押下します。</b>
![vue6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/b891ff9c-ac18-a24a-f611-496e061beb00.png)

<b>一覧画面には、更新したタスク内容が表示されます</b>
![vue7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/3990a6c5-fb84-853d-131a-af785d1369f8.png)

↑のようなサンプルを作っていきます。

# 画面側のコード
`v-model`を使って双方向バインディングに加えて、
サーバ側にデータを渡すために`Javascriot`でおなじみの`document.getElementByID`オブジェくトを使って`body`オブジェクトに入れてPOST送信します。

```detail.vue
    //タスクIDを取得する(取得時の型：文字列型)
    const idValue = document.getElementById('taskId').value;
    //タスクIDの型変換を実行する(型：整数型)
    const convertTypeIdValue = Number(idValue);

    //タスク名を取得する(文字列型)
    const taskValue = document.getElementById('taskName').value;
    //タスク進捗値を取得する(真偽型)
    const taskCheckValue = document.getElementById('taskCheck').checked;
```

全体のコードはこちら↓

```detail.vue
<script setup lang="ts">
import {useRoute} from 'vue-router'

// 現在のルート情報を取得
const route = useRoute();

// クエリパラメータからidを取得
const taskId = route.query.id as number; // ここで型アサーションを加える;
const {data:task,error} = await useAsyncData('taskDetail',() => $fetch(`/api/selectTargetItem?id=${taskId}`));
console.log("取得したJSONデータは、" + JSON.stringify(task));

const handleUpdateData = async(e:Event)=>{

    //タスクIDを取得する(取得時の型：文字列型)
    const idValue = document.getElementById('taskId').value;
    //タスクIDの型変換を実行する(型：整数型)
    const convertTypeIdValue = Number(idValue);

    //タスク名を取得する(文字列型)
    const taskValue = document.getElementById('taskName').value;
    //タスク進捗値を取得する(真偽型)
    const taskCheckValue = document.getElementById('taskCheck').checked;

    const updateTask = await useFetch('api/update',{
        method:'POST',              
        body:{
            taskId:convertTypeIdValue,
            taskTask:taskValue,
            taskCompleted:taskCheckValue
        }               
    })
}

</script>
<template>
    <div>
        <h1>タスクの詳細ページ</h1>
            <!-- データが正常に取得できた場合 -->
        <div v-if="task">
            <form @submit.prevent="handleUpdateData" class="bg-gray-100 border border-black-300 max-w-sm mx-auto px-4 py-4">
                <div>
                    <input type="hidden" v-model="task.id" id="taskId"/>
                </div>
                <div class="mb-5">
                    <input type="text" v-model="task.task" 
                        class="bg-gray-50 border border-gray-300 text-lg rounded-sm w-full" id="taskName"/>
                </div>
                <div class="mb-5">
                    <input type="checkbox" 
                        v-model="task.completed" 
                        :checked="task.completed === true" id="taskCheck"/>
                </div>
                <button type="submit" class="bg-blue-500 text-white font-bold px-4 py-4 rounded-lg" name="taskCompleted">更新する</button>
            </form>
        </div>
        <div class="flex justify-center py-3">
            <a href="/" 
                class="bg-green-500 text-white font-bold px-4 py-4 rounded-lg">
                一覧に戻る
            </a>
        </div> 
    </div>   
</template>
```

# サーバ側のコード
サーバサイドでは、リクエストボディを取得して↓
```update.ts
let body:RequestBody = await readBody(event);
```

受け取ったリクエストボディの中身を確認して↓
```update.ts
    //受け取ったリクエストボディの中身をJSON形式で確認する
    console.log("更新のbodyの中身は、" + JSON.stringify(body));

    //受け取ったリクエストボディのID値を確認する
    console.log("更新のbodyIdの中身は、" + body["taskId"]);
    //受け取ったリクエストボディのタスク値を確認する
    console.log("更新のbodyIdの中身は、" + body["taskTask"]);
    //受け取ったリクエストボディの真偽値を確認する
    console.log("更新のbodyIdの中身は、" + body["taskCompleted"]);
```

データの中身が大丈夫ならデータベースへ登録するという流れになっています↓。

```server/api/update.ts
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

// リクエストボディの型を定義
interface RequestBody {
    id: number;
    task: string;
    completed: boolean;
}

export default defineEventHandler(async(event)=>{
    // リクエストボディの取得
    let body:RequestBody = await readBody(event);
    //更新完了フラグを用意する
    let updateFlag :boolean = false;
    //受け取ったリクエストボディの中身をJSON形式で確認する
    console.log("更新のbodyの中身は、" + JSON.stringify(body));

    //受け取ったリクエストボディのID値を確認する
    console.log("更新のbodyIdの中身は、" + body["taskId"]);
    //受け取ったリクエストボディのタスク値を確認する
    console.log("更新のbodyIdの中身は、" + body["taskTask"]);
    //受け取ったリクエストボディの真偽値を確認する
    console.log("更新のbodyIdの中身は、" + body["taskCompleted"]);
    
    try{
        await prisma.task.update({
            where:{
                id:body["taskId"]
            },
            data:{
                task:body["taskTask"],
                completed:body["taskCompleted"]
            }
        });

        console.log("更新成功しました。")
        updateFlag = true;
        return updateFlag;
    }catch(error){
        console.log("更新に失敗しました")
        return updateFlag;
    }
})
```

以上です。