アプリ サイト

【Nuxt.js】v-model実践編:オリジナルフォームの簡単な作り方

前置き

よく見る入力フォームですよね!
今回はこちらを解説していきます🌟
webサイトのお問い合わせや
アンケートに使われるフォームです。
今回はv-modelで基本的な作り方をご紹介!

※データの送信まではやりません。
別記事で解説します。
その代わりにフォームに入力した内容を
表示させる部分を作っています。
UserDataが表示部分です。
まずはここまでやってみましょう!
1番簡単なinput(type="text")が分かれば簡単です🌟

構成

コンポーネントにせず
pages/index.vueのみで作ってみます。
form内に
各タグと送信ボタンを入れて作ります。
今回は送信しないため、
buttonはクリックするだけです。
formのイベントに
イベント修飾子の.preventをつけないと、
input入力をする際にリロードされてしまいます。
毎度のことですがスタイリングは省きます。

input(type="text")

まずはinputの基本から。
inputをlabelで囲みます。
ベースはこれだけ😌
今回はこちらの書き方で統一します!!

囲まない場合は
labelとinputが1セットであることが
わかるようにforとidで関連付けをします。
これがないとlabelを押しても
inputが反応してくれません😲

では、囲む方の書き方で
v-modelを追加しましょう!

) pages

簡単ですね。
ちなみに苗字と名前でフォームを分けて
1行で表示させたい!って時はsplitを使用します。
今回は省きます。

input(type="checkbox")

基本の型は上のinput(type="text")でご確認を!
v-modelで同じdataの配列にし、
チェックした物をvalueで表示させます。
チェックボックスは複数選べるので配列です。

) pages

ただこのままだと表示の見栄えが悪いので、
valueのみを表示させましょう!

input(type="radio")

基本の型は上のinput(type="text")でご確認を!
あとはほとんど
input(type="checkbox")と同じです♪
dataはradioで1つしか選択できないため
配列にする必要はありません。

) pages

textarea

こちらはinput(type="text")と全く同じです!
template内のみ記載します。
textareaで改行しても表示では改行されません。
そのためpタグにclassをつけ
white-spaceを使用しても良いですね!

) pages

select

今までのinput, textareaと
書き方はほとんど一緒です。
selectタグ内の選択肢optionを
配列として扱うことができます。
いちいちoptionを繰り返さなくて良いです!
楽ちん♪
この場合はperiods, periodの2つの
データ初期値を設定してあげましょう〜!

) pages

-アプリ, サイト
-,

© 2020 aLiz Nuxt