フォームのハンドリング

基礎

フォームの input 要素に two way (双方向)バインディングを作成するには、 v-model ディレクティブを使用します。 v-model ディレクティブは、input の type に基づき、要素を更新する正しい方法を自動的に選択します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form id="demo">
<!-- text -->
<p>
<input type="text" v-model="msg">
{{msg}}
</p>
<!-- checkbox -->
<p>
<input type="checkbox" v-model="checked">
{{checked ? "yes" : "no"}}
</p>
<!-- radio buttons -->
<p>
<input type="radio" name="picked" value="one" v-model="picked">
<input type="radio" name="picked" value="two" v-model="picked">
{{picked}}
</p>
<!-- select -->
<p>
<select v-model="selected">
<option>one</option>
<option>two</option>
</select>
{{selected}}
</p>
<!-- multiple select -->
<p>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
{{multiSelect}}
</p>
<p><pre>data: {{$data | json 2}}</pre></p>
</form>
1
2
3
4
5
6
7
8
9
10
new Vue({
el: '#demo',
data: {
msg : 'hi!',
checked : true,
picked : 'one',
selected : 'two',
multiSelect: ['one', 'three']
}
})

結果

{{msg}}

{{checked ? "yes" : "no"}}

{{picked}}

{{selected}}

{{multiSelect}}

data:

{{$data | json 2}}

遅延更新

デフォルトで、v-model はデータと input を input イベントの直後に同期します。lazy 属性を追加することで、 change イベントの直後に同期させるように、挙動を変更することができます:

1
2
<!-- "input" の代わりに、"change" の直後に同期する  -->
<input v-model="msg" lazy>

値を数値としてキャストする

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

1
<input v-model="age" number>

Expressions にバインドする

0.12.12 以降のみ

チェックボックスとラジオボックスの入力上で v-model を使用するとき、バインドされた値は boolean 値か、string のどちらかです:

1
2
3
4
5
<!-- true または false のどちらかでトグル -->
<input type="checkbox" v-model="toggle">

<!-- このラジオボックスが選択されるとき、pick は "red" になります -->
<input type="radio" v-model="pick" value="red">

これは、時々何か他のものへ根本的な値をバインドしたいかもしれない時、少し制限することができます。ここでは、次のとおりにできます:

Checkbox

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

Radio

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

動的な選択オプション

<select> 要素のオプションリストを動的にレンダリングする必要があれば、オプションが動的に変更されるとき、v-model は正しく同期しているため、v-model と一緒に options 属性を利用することが推奨されています:

1
<select v-model="selected" options="myOptions"></select>

あなたの data では、myOptions はオプションとして使いたい配列を指す keypath または expression である必要があります。

options の配列にはプレーンなテキストを含めることができます。

1
options = ['a', 'b', 'c']

または、{text:'', value:''} の形式のオブジェクトを含めることができます。このオブジェクト形式は、値とは異なるオプション文字列を表示することができます:

1
2
3
4
options = [
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]

これは下記のようにレンダリングされます:

1
2
3
4
<select>
<option value="a">A</option>
<option value="b">B</option>
</select>

value はオブジェクトにすることもできます。

0.12.11 以降のみ

1
2
3
4
options = [
{ text: 'A', value: { msg: 'hello' }},
{ text: 'B', value: { msg: 'bye' }}
]

オプショングループ

一方、オブジェクトは { label:'', options:[...] } の形式も取ることができます。このケースでは、<optgroup> としてレンダリングされます:

1
2
3
4
[
{ label: 'A', options: ['a', 'b']},
{ label: 'B', options: ['c', 'd']}
]

これは下記のようにレンダリングされます:

1
2
3
4
5
6
7
8
9
10
<select>
<optgroup label="A">
<option value="a">a</option>
<option value="b">b</option>
</optgroup>
<optgroup label="B">
<option value="c">c</option>
<option value="d">d</option>
</optgroup>
</select>

オプションフィルタ

あなたの元データがこれらの希望されるフォーマットでなく、動的にオプションを生成するためにデータを変換しなければならない場合がよくあります。DRY な変換をするために、options パラメータはフィルタをサポートしており、あなたの変換ロジックを再利用可能なカスタムフィルタで置き換えるのに役に立ちます。

1
2
3
4
5
Vue.filter('extract', function (value, keyToExtract) {
return value.map(function (item) {
return item[keyToExtract]
})
})
1
2
3
4
<select
v-model="selectedUser"
options="users | extract 'name'">

</select>

上記フィルタは [{ name: 'Bruce' }, { name: 'Chuck' }] のようなデータを ['Bruce', 'Chuck'] に変換し、 正しいフォーマットになります。

静的なデフォルトオプション

0.12.10 以降のみ

動的な生成オプションに加えて、1つの静的デフォルトオプションを提供することができます:

1
2
3
<select v-model="selectedUser" options="users">
<option value="">Select a user...</option>
</select>

users から作成された動的なオプションは、静的なオプションの後に追加されます。v-model の値が偽と評価される (0 は除く) 値の場合、静的なオプションはデフォルトで選択されます。

入力デバウンス

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

1
<input v-model="msg" debounce="500">

結果

{{msg}}

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