Vue form編

## はじめに
ここでは自分がvueのformについて学んだことをまとめる。input,textarea,checkbox,ラジオボタン、セレクトボックスについて双方向バインディングをする方法を自身のアウトプットを兼ねて投稿する。

## 双方向バインディングについて
テンプレート側とスクリプト側のデータを関連づけるのに非常に重要になってくるのがv-modelディレクティブである。

####input要素、textarea要素

```vue:Form.vue
<template>
    <div>
        <input type="text" placeholder="タイトルを入力してください" v-model="title">
        <h1>{{ title }}</h1>
        <textarea v-model="explanation" placeholder="イベントの内容を入力してください"></textarea>
        <p>{{ explanation }}</p>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            title: '',
            explanation: '',
        }
    }
}
</script>
```

scriptタグ内のdataオプションでデフォルトをタイトルとその説明を空文字列として定義している。入力すると同時にスクリプト側でもデータが書き換えられる。

![スクリーンショット 2020-12-05 19.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/6f6365f1-f97a-ac8a-d770-d84d25543776.png)

タイトルや内容を入力すると以下のようになる。


![スクリーンショット 2020-12-05 19.21.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/ec5aaeb2-b829-38ee-5079-3105ef0f3df8.png)

#### 単体のチェックボックス
続いてチェックボックスの実装をする。先ほどまでは入力内容はstring型であったが、今回はboolean、つまり真偽値型である。dataオプションの方ではデフォルトをfalseとして定義する。チェックボックスにチェックを入れるとfalseがtrueになるのがわかる。

```vue:Form.vue
<input type="checkbox" id="isPrivate" v-model="isPrivate">
<label for="isPrivate">非公開</label>
<p>{{ isPrivate }}</p>
```

![スクリーンショット 2020-12-05 19.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/827d509b-ee0e-ba39-005e-ad35516c8774.png)

チェックを入れるとtrue,チェックを外すとfalseとそれぞれの値が紐付いていることがわかる。

#### 複数のチェックボックス

次に複数のチェックボックスを実装する。先ほどは単体であったため、至って普通の変数に格納すれば良かったが、複数のチェックボックスを実装するときには値は配列に格納されることになる。

```vue:Form.vue
<input type="checkbox" id="favorite" value="サッカー" v-model="favorite">
<label for="favorite">サッカー</label>
<input type="checkbox" id="favorite" value="野球" v-model="favorite">
<label for="favorite">野球</label>
<input type="checkbox" id="favorite" value="バスケ" v-model="favorite">
<label for="favorite">バスケ</label>
<p>{{ favorite }}</p>
```

v-modelディレクティブでバインディングしているfavoriteは配列で定義する。すると、チェックボックスは複数選択可能なので配列の中に値が格納されていくのがわかる。

![スクリーンショット 2020-12-05 19.55.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/9d296e0b-0ee8-ff87-6d7e-33b3632bec62.png)


ちなみにinput要素にvalue属性をつけないとうまく動作しない。value属性を定義しなかったときの挙動は以下のようになる。

![スクリーンショット 2020-12-05 19.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/8c9e6dd4-68a0-6d22-c33f-5cefed85a1ab.png)

一つの選択肢にチェックを入れると全てにチェックが自動的に入り、配列の中には値は何も格納されていないことがわかる。

https://html-coding.co.jp/annex/dictionary/html/input/

上のサイトを参考にするとvalue属性は初期値を指定する属性で受け取るデータ型は文字列である。先ほどの単体のチェックボックスだと真偽値型でdataオプションの中で初期値としてfalseを与えているのでvueは認識してくれるかもしれないが、複数のチェックボックスになったときdataオプションの中では配列で定義するので文字列を表示するときにはvalue属性で初期値を与えてやる必要があるのではないかと考えた。（間違っている場合は是非ご指摘ください:bow:）

#### ラジオボタン
次にラジオボタンの実装に取り掛かる。ラジオボタンは複数選択することが出来ない。ラジオボタンとチェックボックスの違いは複数選択できるか否かであるので実装にさほど変わりはない。これも同様、value属性がないとうまく動作しないので注意が必要。

```vue:Form.vue
<h3>大学の学科</h3>
<input type="radio" id="college" value="economy" v-model='department'>
<label for="college">経済</label>
<input type="radio" id="college" value="literture" v-model='department'>
<label for="college">文学</label>
<input type="radio" id="college" value="chemistry" v-model='department'>
<label for="college">化学</label>
<input type="radio" id="college" value="machine" v-model='department'>
<label for="college">機械</label>
<p>{{ department }}</p>
```

![スクリーンショット 2020-12-05 21.19.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/341fc478-c29c-ea1c-00e8-117f8474151a.png)

チェックボックスで選択した要素のvalue属性が{{ department }}で表示される。

#### セレクトボックス

最後にセレクトボックスの相互バインディングをする方法についてまとめる。

```vue:Form.vue
<h3>開催場所</h3>
<select v-model="location">
  <option v-for="location in locations" v-bind:key="location">{{ location }}</option>
</select>
<p>{{ location }}</p>

~省略~

data: function() {
        return {
            title: '',
            explanation: '',
            isPrivate: false,
            favorite: [],
            department: [],
            locations: [
                "tokyo",
                "osaka",
                "fukuoka",
                "hokkaido",
                "kyoto"
            ],
            location: "tokyo",
        }
```

![スクリーンショット 2020-12-05 21.40.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574301/944fdcee-bd8f-7940-603b-44288e1b3ca2.png)

セレクトボックスは今までやってきたものに比べると複雑だと思う。selectタグの中にバインディングするためのv-modelディレクティブを記述し、optionタグの中でv-forディレクティブで配列を展開する。そしてv-forディレクティブで展開するためにはkeyタグという独自の属性でlocationを指定しなければならない。


##最後に
ブラウザの状況を画像形式で上げてしまい申し訳ありません、おそらくわかりづらかったと思います。qiitaの記事に動画を埋め込む方法が分かり次第、修正します。また、より質の良い情報発信をするために説明が不十分なところなどは是非指摘いただけたら幸いです。