前置き
よく見る入力フォームですよね！
今回はこちらを解説していきます🌟
webサイトのお問い合わせや
アンケートに使われるフォームです。
今回はv-modelで基本的な作り方をご紹介！
※データの送信まではやりません。
別記事で解説します。
その代わりにフォームに入力した内容を
表示させる部分を作っています。
UserDataが表示部分です。
まずはここまでやってみましょう！
1番簡単なinput(type="text")が分かれば簡単です🌟
構成
コンポーネントにせず
pages/index.vueのみで作ってみます。
form内に
各タグと送信ボタンを入れて作ります。
今回は送信しないため、
buttonはクリックするだけです。
formのイベントに
イベント修飾子の.preventをつけないと、
input入力をする際にリロードされてしまいます。
毎度のことですがスタイリングは省きます。
|
1 2 3 4 5 6 7 8 9 10 |
<template> <div class="page"> <form @submit.prevent> // inputなどはform内に！ <input> // 送信ボタンももちろんform内 <button type="submit">アンケートを終了する</button> </form> </div> </template> |
input(type="text")
まずはinputの基本から。
inputをlabelで囲みます。
ベースはこれだけ😌
今回はこちらの書き方で統一します！！
|
1 |
<label><input type="text"></label> |
囲まない場合は
labelとinputが1セットであることが
わかるようにforとidで関連付けをします。
これがないとlabelを押しても
inputが反応してくれません😲
|
1 2 |
<label for="name"></label> <input type="text" id="name"> |
では、囲む方の書き方で
v-modelを追加しましょう！
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <label> お名前 <input type="text" v-model="userData.name" > </label> <div class="userdata"> <h3>UserData</h3> <p>お名前: {{ userData.name }}</p> </div> </template> <script> export default { data () { return { userData: { // 初期値を入れる name: '', }, } }, } </script> |
簡単ですね。
ちなみに苗字と名前でフォームを分けて
1行で表示させたい！って時はsplitを使用します。
今回は省きます。
input(type="checkbox")
基本の型は上のinput(type="text")でご確認を！
v-modelで同じdataの配列にし、
チェックした物をvalueで表示させます。
チェックボックスは複数選べるので配列です。
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<template> <label> <input type="checkbox" value="SNS" v-model="hear" > SNS </label> <label> <input type="checkbox" value="知り合いの紹介" v-model="hear" > 知り合いの紹介 </label> <label> <input type="checkbox" value="雑誌" v-model="hear" > 雑誌 </label> <div class="userdata"> <h3>UserData</h3> <p>お名前: {{ userData.name }}</p> <p>きっかけ: {{ hear }}</p> </div> </template> <script> export default { data () { return { userData: { // 初期値を入れる name: '', }, hear: [], } }, } </script> |
ただこのままだと表示の見栄えが悪いので、
valueのみを表示させましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 修正前 <p>きっかけ: {{ hear }}</p> // 修正後 <ul> <li v-for="value in hear" :key="value" > {{ value }} </li> </ul> |
input(type="radio")
基本の型は上のinput(type="text")でご確認を！
あとはほとんど
input(type="checkbox")と同じです♪
dataはradioで1つしか選択できないため
配列にする必要はありません。
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<template> <label> <input type="radio" value="Male" v-model="gender" > 男性 </label> <label> <input type="radio" value="Female" v-model="gender" > 女性 </label> <div class="user-data"> <h3>UserData</h3> <p>お名前: {{ userData.name }}</p> <p>性別： {{ gender }}</p> <ul> <li v-for="value in hear" :key="value" > {{ value }} </li> </ul> </div> </template> <script> export default { data () { return { userData: { name: '', }, hear: [], gender: '', } }, } </script> |
textarea
こちらはinput(type="text")と全く同じです！
template内のみ記載します。
textareaで改行しても表示では改行されません。
そのためpタグにclassをつけ
white-spaceを使用しても良いですね！
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <label> <textarea rows="4" cols="40" v-model="message" /> </label> <div class="user-data"> <h3>UserData</h3> <p>お名前: {{ userData.name }}</p> <p>性別： {{ gender }}</p> <ul> <li v-for="value in hear" :key="value" > {{ value }} </li> <p class="message">ご意見： {{ message }}</p> </ul> </div> </template> |
select
今までのinput, textareaと
書き方はほとんど一緒です。
selectタグ内の選択肢optionを
配列として扱うことができます。
いちいちoptionを繰り返さなくて良いです！
楽ちん♪
この場合はperiods, periodの2つの
データ初期値を設定してあげましょう〜！
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<template> <label> <select v-model="period" > <option v-for="period in periods" :key="period" > {{ period }} </option> </select> </label> </template> <div class="user-data"> <h3>UserData</h3> <p>お名前: {{ userData.name }}</p> <p>性別: {{ gender }}</p> <p>きっかけ:</p> <ul> <li v-for="value in hear" :key="value" > {{ value }} </li> </ul> <p>来店日 {{ period }}</p> <p>ご意見： {{ message }}</p> </div> <script> export default { data () { return { userData: { name: '', }, hear: [], gender: '', message: '', periods: ['1週間以内', '2週間以内', '1ヶ月以内'], period: '', } }, } </script> |