【Nuxt.js】入力フォームを作成して、送信後、画面遷移させる方法

Nuxt.jsで、次のような簡易なフォームを作成して、デベロッパーツール上に「送信されました。」と表示させるプログラムを作成していきます。
送信後に、ページを遷移させます。

Nuxt.js

入力フォームの作成

index.vueの template 部分に次を記述します。

ブラウザでは次のように表示されます。

Nuxt.js

Bootstrapの適用

Bootstrapを使用して、見た目を良くします。
ちなみにBootstrapは、プロジェクト作成時にインストールしてあります。
次のコードへ変更します。

<input>タグを<b-form-input>へ変更
<button>タグを<b-button>タグへ変更しました。

ブラウザの表示が次のように変わります。
Nuxt.js
Bootstrapの公式サイト

スクリプトを記述

script 部分に data と methods を記述します。

動作確認

次のコマンドでプログラムを実行させます。

npm run dev

デベロッパーツールで確認

Vue.js devtools をブラウザにアドインさせましょう。
GoogleChrome と Firefox にアドインできます。

Nuxt.js

GoogleChromeの場合、ブラウザの「その他のツール」から「デベロッパーツール」を開きます。

デベロッパーツール

デベロッパーツールが表示されます。
下記の画像では、Vueのデベロッパーツールをブラウザにアドインしています。

デベロッパーツール

入力フォームにテストと入力して、エンターすると、デベロッパーのコンソール部分に「送信されました。」と表示されます。

Nuxt.js

Nuxt.js

画面遷移

methodsに画面遷移の記述をします。
after_input.vueというファイルを作成して、そのページに遷移するようにします。
after_input.vueは、次のように文字を表示するだけのページです。

index.vue を次のように変更します。

this.$router.push({ name:‘after_input’ }) を追記しました。
ブラウザのテキストボックスでエンターまたは、送信をクリックすると、
次のような画面に遷移する事を確認できると思います。
Nuxt.js
ちなみに現在のコードでは、入力がなくても画面遷移します。

まとめ

今回は、Nuxt.jsに入力フォームを作成し、画面遷移するプログラムを作成しました。
最後までお読みいただきありがとうございました。

1件のコメント

  1. サイト作りに役立つ情報を探していてたどり着きました。

    この先、フォームの送信をメールで受信するにはどうしたらいいのか
    検索していますが未だみつかりません。
    次回、『フォームの送信をメールで受信』のテーマで書いていただければ嬉しいです。

    よろしくお願いします。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください