ガイド

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

最終更新日: 2018年6月6日

基本的な使い方

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

v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。

IME (中国語、日本語、韓国語、その他) が必須な言語に対しては、v-model は IME コンポジションの間は更新されないことに注意してください。これらの更新に対して対応したい場合は、input イベントを代わりに使用します。

テキスト

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

Message is: {{ message }}

複数行テキスト

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

{{ message }}


textarea への挿入 (<textarea>{{text}}</textarea>) は動きません。代わりに、v-modelを使用してください。

チェックボックス

単体のチェックボックスは、 boolean 値です:

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

複数のチェックボックスは、同じ配列に束縛します。:

<div id='example-3'>
  <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>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Checked names: {{ 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>


Picked: {{ picked }}

選択

単体の選択:

<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: ''
  }
})
Selected: {{ selected }}

v-model の式の初期値がオプションのどれとも一致しない場合、<select> 要素は “未選択” の状態で描画されます。iOS ではこの場合、iOS が change イベントを発生させないため、最初のアイテムを選択できなくなります。したがって、上記の例に示すように、空の値で無効なオプションを指定することを推奨します。

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

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

Selected: {{ selected }}

動的オプションは 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 値は文字列以外の値で束縛できます。

チェックボックス

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// チェックされたとき:
vm.toggle === 'yes'
// チェックが外されたとき:
vm.toggle === 'no'

true-value と false-value 属性は入力フォームの value 属性に影響しません。なぜならブラウザはフォームの送信にチェックされていないボックスを含まないからです。 2つの値のうちのいずれかがフォームで送信されるようにするには、代わりにラジオを使用してください(例: “はい” または “いいえ”)。

ラジオ

<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'
vm.selected.number // => 123

修飾子

.lazy

デフォルトでは、 v-model は各 input イベント (上記の IME コンポジションを除いて) 後に、データと入力を同期します。 change イベント後に同期するように変更するために lazy 修飾子を追加することができます:

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

.number

ユーザの入力を数値として自動的に型変換したいとき、 v-model に管理された入力に number 修飾子を追加することができます:

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

これは、しばしば有用です。なぜなら、 type=number と書いたときでさえ、 HTML の input 要素の value は常に文字列を返すからです。

.trim

ユーザの入力を自動的にトリムしたいとき、 v-model に管理された入力に trim 修飾子を追加することができます:

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

コンポーネントの v-model

Vue のコンポーネントにまだ精通していない人は、この部分をスキップしてください。

HTML の組み込みの input 要素は常にあなたの要望に合うとは限りません。幸いにも、Vue のコンポーネントを使用すると、完全にカスタマイズされた動作で再利用可能な独自の input 要素的なものを作成することができます。これらの入力コンポーネントは v-model を使用することができます！より詳細については、カスタム入力をコンポーネントガイドで参照してください。

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