フォームの送信とリセット
@submit.prevent、FormData、フォーム状態のリセット、読み込み中の送信ボタン無効化について学習します。
「フォームの送信とリセット」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
フォーム送信を処理する
実際のフォームでは、ページを再読み込みせずにデータを送信し、読み込み状態を管理して、その後フォームをリセットする必要があります。Composition APIといくつかのディレクティブを使うと、これらをすっきり実装できます。
ページの再読み込みを止める
フォームを送信すると、デフォルトではページが再読み込みされます。@submitの.prevent修飾子はpreventDefault()を呼び出すため、JavaScriptで送信を処理できます。
<form @submit.prevent="onSubmit">
<button type="submit">Send</button>
</form>リアクティブなフォームオブジェクト
関連するフィールドを1つのリアクティブなオブジェクトにまとめます。各入力は、そのオブジェクトのプロパティにv-modelでバインドします。
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>
<template>
<input v-model="form.name" />
<input v-model="form.email" />
</template>送信ハンドラー
ハンドラーはリアクティブなフォームの内容を読み取り、送信します。.preventが適用されているため、ページはそのまま維持されます。
<script setup>
async function onSubmit() {
await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(form)
})
}
</script>読み込み状態を追跡する
loading refを追加すると、リクエストの実行中にUIを反応させることができます。リクエストの前にtrueに設定し、後にfalseに設定します。
<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>送信中にボタンを無効にする
:disabledをloadingにバインドし、ユーザーが二重送信できないようにします。非同期呼び出しの前後でloadingを切り替えてください。
<script setup>
async function onSubmit() {
loading.value = true
try { await save() } finally { loading.value = false }
}
</script>
<template>
<button type="submit" :disabled="loading">Send</button>
</template>送信結果をフィードバックする
loadingフラグを使ってボタンのテキストを切り替えたり、スピナーを表示したりすると、処理中であることをユーザーに明確に伝えられます。
<template>
<button :disabled="loading">
{{ loading ? 'Sending...' : 'Send' }}
</button>
</template>フォームをリセットする
フォームをクリアするには、各フィールドに初期値を再代入します。リセットを確実に行えるよう、初期状態のスナップショットを保持しておきます。
<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>送信成功後にリセットする
リクエストが成功したらresetを呼び出し、ユーザーがまっさらな状態で次の入力を始められるようにします。
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>すべてを組み合わせる
完全なパターンは、再読み込みの防止、リアクティブフォーム、読み込み中のガード、ボタンの無効化、成功時のリセットです。これは、ほとんどのVueフォームの基盤となります。
try/finallyを使う理由
非同期処理をtry/finallyで囲むと、リクエストで例外が発生してもloadingがリセットされます。そうしないと、送信に失敗したときにボタンが永久に無効なままになる可能性があります。
確認テスト
フォーム送信に関する知識をテストします。
振り返り
フォーム送信の基本：
@submit.preventでページの再読み込みを防ぎます。- フィールドを、
v-modelでバインドしたリアクティブオブジェクトにまとめます。 loadingのrefを追跡し、:disabledにバインドします。- 各フィールドに初期値を再代入してリセットします。成功時に行うのが理想的です。
try/finallyを使い、読み込み状態が必ずリセットされるようにします。
よくある質問
「フォームの送信とリセット」レッスンは無料ですか？
はい。「フォームの送信とリセット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「フォームの送信とリセット」で何を学びますか？
@submit.prevent、FormData、フォーム状態のリセット、読み込み中の送信ボタン無効化について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「フォームの送信とリセット」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。