フォーム入力バインディング

フォーム入力バインディング

v-modelについてのおさらい

1. データバインディングで、要素のvalue属性を更新する。
2. イベントハンドリングで、受け取った値をデータに代入する
3. 属性は無視される ※1

※1　v-model利用時はvalue.checked,selectedといった属性は無視される

https://jsfiddle.net/hiroki1205/938nqps6/39/

textareaではv-modelを利用する

mustacheでは反映しない

new Vue({
  el: "#app",
  data: {
    message: "Hello. vule.js"
  }
})

<div id="app">
  <pre> {{ message }}</pre>
  <textarea> {{ message }}</textarea>
  <pre>{{ $data }}</pre>
</div>

--> textareaを変更しても変わらない

これならOK

<div id="app">
  <pre> {{ message }}</pre>
  <textarea v-model="message"></textarea>
  <pre>{{ $data }}</pre>
</div>

https://jsfiddle.net/hiroki1205/938nqps6/43/

チェックボックス

■単体の場合

new Vue({
  el: "#app",
  data: {
    checked: false
  }
})

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <pre> {{ $data }}</pre>
</div>

--> チェックボックスの切り替えでtrue/falseが動的に変更される

https://jsfiddle.net/hiroki1205/938nqps6/47/
■複数の場合

new Vue({
  el: "#app",
  data: {
    colors: []
  }
})

<div id="app">
  <input type="checkbox" id="red" value="Red" v-model="colors">
  <label for="red">Red</label>
  <input type="checkbox" id="green" value="Green" v-model="colors">
  <label for="green">Green</label>
  <input type="checkbox" id="blue" value="Blue" v-model="colors">
  <label for="blue">Blue</label>
  <pre> {{ $data }}</pre>
</div>

--> 入力されたチェックボックスがcolors配列に入力される

https://jsfiddle.net/hiroki1205/938nqps6/52/

ラジオボタン

new Vue({
  el: "#app",
  data: {
    color: ""
  }
})

<div id="app">
  <input type="radio" id="red" value="Red" v-model="color">
  <label for="red">Red</label>
  <input type="radio" id="green" value="Green" v-model="color">
  <label for="green">Green</label>
  <pre> {{ $data }}</pre>
</div>

---> 選択された値の文字列がcolorに入力される

https://jsfiddle.net/hiroki1205/938nqps6/54/

セレクトボックス

■ 単体

new Vue({
  el: "#app",
  data: {
    selected: ""
  }
})

<div id="app">
  <select v-model="selected">
    <option disable value="">please select</option>
    <option>RED</option>
    <option>GREEN</option>
  </select>
  <p>
    {{ selected }}
  </p>
</div>

--> 選択された文字列がselectedに代入される

https://jsfiddle.net/hiroki1205/938nqps6/60/

■ 複数

new Vue({
  el: "#app",
  data: {
    selected: []
  }
})

<div id="app">
  <select v-model="selected" multiple>
    <option disable value="">please select</option>
    <option>RED</option>
    <option>GREEN</option>
  </select>
  <p>
    {{ selected }}
  </p>
</div>

--> 選択された値が配列に入力される

https://jsfiddle.net/hiroki1205/938nqps6/62/

■ 修飾子

.lazy -- > バインドのタイミングを遅らせる
.trim --> 入力値から前後の空白削除データ入力
.number -- > 入力を数値型に変換してデータ入力