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

# 前置き
![picture_pc_b7c73c90b53dce23fa5b30b37e66860f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/4cf8f125-4ff9-3837-04cd-ba0d7eaad57f.gif)

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


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

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

```index.vue
index.vue
<template>
 <form @submit.prevent>
  // inputなどはform内に！
  <input>
  // 送信ボタンももちろんform内
  <button type="submit">アンケートを終了する</button>
 </form>
</template>
```

# input(type="text")
![picture_pc_980d57d1e7926b289521b28f8e8b3b3d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/125fde54-396b-daee-bf68-97b41b53e53a.gif)

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

```index.vue
<label><input type="text"></label>
```

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

```index.vue
<label for="name"></label>
<input type="text" id="name">
```

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

```index.vue
<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")
![picture_pc_cf818bf12ef8d5bfa74a97e40738689a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/82c5bc5e-19e3-2981-9a22-7ff038c2a6d0.gif)
基本の型は上のinput(type="text")でご確認を！
v-modelで同じdataの配列にし、
チェックした物をvalueで表示させます。
チェックボックスは複数選べるので配列です。

```index.vue
<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のみを表示させましょう！
![picture_pc_b143babde42f5f107f730cd84d3ea538.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c07a22f1-de57-7d37-c49c-ee6996ca9673.gif)

```index.vue
// 修正前
<p>きっかけ: {{ hear }}</p>

// 修正後
<ul>
 <li
  v-for="value in hear"
  :key="value"
 >
  {{ value }}
 </li>
</ul>
```

# input(type="radio")
![picture_pc_23a4b620f4abbf1bedccdaedae89ff74.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ceadf4bc-b0c3-dcd5-890e-68fa90fbe6f6.gif)
基本の型は上のinput(type="text")でご確認を！
あとはほとんど
input(type="checkbox")と同じです♪
dataはradioで1つしか選択できないため
配列にする必要はありません。

```index.vue
<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を使用しても良いですね！

```index.vue
<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
![picture_pc_10fbdb8afaf1f0ce92a319573b45415e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f26d8c81-131b-c893-81db-931d3ac986c6.gif)
今までのinput, textareaと
書き方はほとんど一緒です。
selectタグ内の選択肢optionを
配列として扱うことができます。
いちいちoptionを繰り返さなくて良いです！
楽ちん♪
この場合はperiods, periodの2つの
データ初期値を設定してあげましょう〜！

```index.vue
<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>
```

これで完成です♪


**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab