vue.jsの使い方の基礎＃６【フォーム入力バインディング】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（フォーム入力バインディングの部分）
[公式ドキュメント](https://v3.ja.vuejs.org/guide/forms.html)とやっていることは基本的に同じです。

Vue.js基礎知識に関する記事を随時更新しています。もしよければ参考にしてください。

https://qiita.com/kty000/items/c919e01fc0c118098eb9

#基本的な使い方
formの要素（input,textarea,select）に双方向データバインディング（vueがもつ情報とアプリケーション状態の結びつけ）を付与するために`v-mode`を使用することができます。
`v-model`はフォーム要素の value 属性や checked 属性、selected 属性の初期値を無視します。

>内部的には、`v-model`は異なる input 要素に対し異なるプロパティを使用し、異なるイベントを送出します。

要素が違うなら使うプロパティもちがうわよってことらしい。

##text要素
text および textarea 要素には、**value プロパティ**と **input イベント**を用います

```.vue
<!-- text -->
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>


<!-- textarea -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
```
入力フィールドと、入力した文字が画面に即時表示されます。
　
　
##チェックボックス要素
チェックボックスには、**checked プロパティ**と **change イベント**を用います

```.vue
<!-- 単一のチェックボックス -->
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
```
チェックボックスを押下すると、true,falseが切り替わります。

```.vue
<!-- 同じ配列にバインドされた複数のチェックボックス -->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <br />
    <span>Checked names: {{ checkedNames }}</span>

～～略～～
<script>
export default {
    data() {
        return {
            checkedNames:[]
        }
    }
}
</script>

```
押下したチェックボックスの名前が表示されます。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550109/ad9ae77a-3a5a-b80b-ff5e-4445e07e560d.png)

##ラジオボタン要素
ラジオボタンには、チェックボックスと同じく**checked プロパティ**と **change イベント**を用います

```.vue
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>

～～略～～
```

##select要素
select フィールドには、**value プロパティ**と **change イベント**を用います

```.vue
　<select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>

～～略～～
```
以下公式引用

:::note info
v-model の式の初期値がいずれのオプションとも一致しない場合、<select> 要素は 未選択 の状態で描画されます。これにより iOS では最初のアイテムが選択できなくなります。なぜなら iOS はこのような場合に change イベントを発火させないためです。したがって、上記の例で示したように、value を持たない disabled なオプションを追加しておくことをおすすめします。
:::


#修飾子

##.lazy
デフォルトでは `v-model` は各 `input` イベント後に入力値とデータを同期します。`lazy` 修飾子を加えることで、`change` イベント後に同期するよう変更できます。

たとえば、先程の入力フィールドでは、入力された瞬間にデータを同期していましたが、
`lazy` 修飾子を加えることで、入力し終わってEnterで入力フィールドを出たときにデータを同期させることができるわけですね。

```.vue
<input v-model.lazy="msg" />
```

##.number
ユーザ入力を自動的に number へ型キャストさせたい場合に使用します。
`type="number"` が書いてあったとしても HTML の input 要素は常に文字列を返すため、これはかなり有用ですね。
値が parseFloat() でパースできない場合は、元々の値が返却されます。

```.vue
<input v-model.number="age" type="number" />
```

##.trim
ユーザ入力から空白を自動で取り除きたい場合は、`v-model` で管理している input に `trim` 修飾子を加えることができます。

```.vue
<input v-model.trim="msg" />
```