Formの作成

以下はvue.jsで簡単なfromを作成する時参考した記事です。

連打防止をするために参考にした記事です。

POSTリクエストを送信するため参考した記事です。

laravelのJetstramのソースコードを参考しながら、Inertiaを利用した時のコードは以下となります。

<template>
    ...
        <form id="turn-form" @submit.prevent="endTurnSubmit">
            <input type="hidden" name="current_date" v-model="endTurnForm.currentDate">
            <input type="hidden" name="next_date" v-model="endTurnForm.nextDate">
            <button type="submit" :disabled="formDisable.endTurnForm" class="fixed ...">
                <svg class="-ml-1 mr-2 h-5 w-5" ...>
                    <path fill-rule="evenodd" ...></path>
                </svg>
                End Turn
            </button>
        </form>
    ...
</template>

<script>
    ...
    export default {
        ...
        data() {
            return {
                endTurnForm: this.$inertia.form({
                    currentDate: '2020-03-16',
                    nextDate: '2020-03-17'
                }),
                formDisable: {
                    endTurnForm: false
                }
            }
        },

        methods: {
            endTurnSubmit() {
                if (this.formDisable.endTurnForm) {
                    console.log('[WARNING] 連打防止のため、「endTurnSubmit」を中止しました。');
                } else {
                    console.log('[DEBUG] 「endTurnSubmit」を開始しました。');
                    this.formDisable.endTurnForm = true;
                    this.endTurnForm.post(this.route('dashboard.turn'));
                }
            }
        },
    }
</script>

Vue 2.X → 3.X