ガイド

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

基本的な使い方

form の input 要素 と textarea 要素で双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。それは、自動的に入力されたタイプに基づいて要素を更新するための正しい方法を選択します。わずかな魔法とはいえ、v-model は本質的にユーザーの入力イベントにおいてデータを更新するための糖衣構文 (syntax sugar) で、そのうえ、いくつかのエッジケースに対して特別な配慮が必要です。

Text

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
Message is: {{ message }}

TextArea

<span>Multiline message is:</span>
<p>{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
Message is:

{{ message }}


Checkbox

単体のチェックボックスは、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 | json }}</span>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

Checked names: {{ checkedNames | json }}

Radio

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


Picked: {{ picked }}

Select

単体の選択:

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

複数の選択 (配列にバウンド):

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

Selected: {{ selected | json }}

動的オプションは 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' }
    ]
  }
})
Selected: {{ selected }}

値のバインディング

radio、checkbox、そして select オプションは、v-modelバインディングの値は通常静的文字列 (または、チェックボックスには boolean )を指定します:

<!-- チェックされたとき、`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>

しかし、時どき、私達は、Vue インスタンスで動的プロパティに値をバインドしたいかもしれません。私達はそれを達成するために v-bind を使用することができます。 ほかに、v-bind の使用は、私達に文字列ではない値に input 値をバインドします。

Checkbox

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b">
// チェックしたとき:
vm.toggle === vm.a
// チェックがはずれされたとき:
vm.toggle === vm.b

Radio

<input type="radio" v-model="pick" v-bind:value="a">
// チェックしたとき:
vm.pick === vm.a

Select Options

<select v-model="selected">
  <!-- インラインオブジェクトリテラル -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 選択したとき
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

パラメータ属性

lazy

デフォルトでは、v-model は各 input イベント後に、データと入力を同期します。change イベント後、同期するための振舞いを変更するために、lazy 属性を追加します:

<!-- "input" の代わりに "change" 後に同期します -->
<input v-model="msg" lazy>

number

ユーザーの入力において自動的に数値として永続化する場合、v-model を管理された input の値に対して、number 属性を追加することができます。

<input v-model="age" number>

debounce

debounce パラメータは、入力値が Model に同期される前の各キーストローク後の最小遅延の設定を許可します。これは、例えば、先行入力自動補完向けに Ajax リクエストを作成するような、各更新時に高価な操作を実行しているときには便利です。

<input v-model="msg" debounce="500">
{{ msg }}

debounce パラメータはユーザーの入力イベントをデバウンスしないことに注意してください: それは基礎となるデータに “書き込み” 操作をデバウンスします。そのためdebounce を使用するときデータ変に対して反応するために vm.$watch() を使用する必要があります。本物の DOM イベントをデバウンスするためには、debounce filter を使います。

← メソッドとイベントハンドリング トランジション →
間違いを見つけた、またはドキュメントに貢献したいですか？Github 上でこのページを編集する か、Github からこのサイトを Fork してプルリクエストしましょう！