Nuxt.jsで、次のような簡易なフォームを作成して、デベロッパーツール上に「送信されました。」と表示させるプログラムを作成していきます。
送信後に、ページを遷移させます。
入力フォームの作成
index.vueの template 部分に次を記述します。
ブラウザでは次のように表示されます。
Bootstrapの適用
Bootstrapを使用して、見た目を良くします。
ちなみにBootstrapは、プロジェクト作成時にインストールしてあります。
次のコードへ変更します。
<input>タグを<b-form-input>へ変更
<button>タグを<b-button>タグへ変更しました。
ブラウザの表示が次のように変わります。
Bootstrapの公式サイト
スクリプトを記述
script 部分に data と methods を記述します。
動作確認
次のコマンドでプログラムを実行させます。
npm run devデベロッパーツールで確認
Vue.js devtools をブラウザにアドインさせましょう。
GoogleChrome と Firefox にアドインできます。
GoogleChromeの場合、ブラウザの「その他のツール」から「デベロッパーツール」を開きます。
デベロッパーツールが表示されます。
下記の画像では、Vueのデベロッパーツールをブラウザにアドインしています。
入力フォームにテストと入力して、エンターすると、デベロッパーのコンソール部分に「送信されました。」と表示されます。
画面遷移
methodsに画面遷移の記述をします。
after_input.vueというファイルを作成して、そのページに遷移するようにします。
after_input.vueは、次のように文字を表示するだけのページです。
index.vue を次のように変更します。
this.$router.push({ name:‘after_input’ }) を追記しました。
ブラウザのテキストボックスでエンターまたは、送信をクリックすると、
次のような画面に遷移する事を確認できると思います。
ちなみに現在のコードでは、入力がなくても画面遷移します。
まとめ
今回は、Nuxt.jsに入力フォームを作成し、画面遷移するプログラムを作成しました。
最後までお読みいただきありがとうございました。
サイト作りに役立つ情報を探していてたどり着きました。
この先、フォームの送信をメールで受信するにはどうしたらいいのか
検索していますが未だみつかりません。
次回、『フォームの送信をメールで受信』のテーマで書いていただければ嬉しいです。
よろしくお願いします。