Vue.js 入門 vol.5 フォーム入力バインディング

参考サイト

https://jp.vuejs.org/v2/guide/forms.html

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

• formのinput要素と、textarea要素で、two-way binding を作成するには、v-modelを使うことができる。（初期値は無視する。）

• テキストの例

<input v-model="message" placeholder="edit me">
<p>Message is : {{ message }}</p>

• 複数行テキスト

<span>Multilien message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add mutiple lines"></textarea>

• チェックボックス, 単体の場合は、boolean値

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

• 複数チェックボックスは、同じ配列になるらしい。

<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>

new Vue({
  el: '...',
  data: {
    checkedNames:[]
  }
})

• ラジオボタン

<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 v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

• 複数の選択（配列に束縛）

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>  
</select>
<br>
<span>Selected: {{ selected }}</span>

• 動的オプションは、v-forで描画できる。

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C'}
    ]
  }
})

値のバインディング

• radio, checkbox, selectは、valueを返す。

<!-- チェックされたとき、`picked` は文字列"a"になります -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` は true かまたは false のどちらかです -->
<input type="checkbox" v-model="toggle">
<!-- 選択されたとき、`selected` は文字列"abc"です -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

• チェックボックスで、データを動的に変更したいときは、v-bindを使う。(true-value, false-valueがそれぞれのチェックがついたときに返すvalueの値。文字列a/bを代入している。)

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// チェックされたとき:
vm.toggle === vm.a
// チェックがはずれされたとき:
vm.toggle === vm.b

• ラジオボタン

<input type="radio" v-model="pick" v-bind:value="a">

vm.pick === vm.a

• 選択オプション

<select v-model="selected">
  <option v-bind:value="{ number: 123}">123</option>
</select>

//選択したとき
typeof vm.selected // -> 'object'（{number:123 }
vm.selected.number // -> 123

修飾子

• .lazy (inputイベント時ではなく、changeイベント後に実行される（同期される))

<input v-model.lazy="msg">

• .number (数値として型変換したいときに使う): これは結構重要で、基本的に、input tagに、type=numberと書いていても、文字列を返すから。

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

• .trim 自動的にトリムする時に使える。

<input v-model.trim="msg">

まとめ

• v-modelは、input, textareaで基本的に使う。