こんにちは、ミナトです。
「Vue.jsでフォームの入力でデータバインディングを行いたい」
このような時は、Vue.jsではv-modelディレクティブを利用することで、入力値とデータを双方向にデータバインディングできます。
今回はVue.jsのフォームのデータバインディングについて解説します。
目次
フォーム入力データバインディングの基本
テキスト
フォームの入力値とデータを同期するには、v-modelを利用して双方向バインディングを行います。
以下の例ではテキストフィールドとdataのmessageを双方向にバインディングしています。
日本語のようにIMEの入力確定が必要な言語では、IMEでテキストが確定するまでは更新されないことに注意してください。
<div id="app">
<p>{{ message }}</p>
<input v-model="message" />
</div>new Vue({
el: '#app',
data: {
message: '',
},
})複数行テキスト
<div id="app">
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message"></textarea>
</div>new Vue({
el: '#app',
data: {
message: '',
},
})チェックボックス
単体のチェックボックスの値はboolean値で管理します。（trueまたはfalse）
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>new Vue({
el: '#app',
data: {
checked: false
}
})複数のチェックボックス
複数のチェックボックスの場合は値を配列で管理します。
<input type="checkbox" id="jack" value="Jack" v-model="checked">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checked">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checked">
<label for="mike">Mike</label>
<p>{{ checked }}</p>new Vue({
el: '#app',
data: {
checked: []
}
})ラジオボタン
ラジオボタンの値のデフォルトの型は文字列となります。
<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>
<p>{{ picked }}</p>new Vue({
el: '#app',
data: {
picked: ''
}
})セレクトボックス
セレクトボックスの値のデフォルトの型は文字列となります。
また、複数選択の場合のデフォルトの型は配列となります。
<div id="app">
<select v-model="selected">
<option disabled value="">選択してください</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>{{ selected }}</p>
</div>new Vue({
el: '#app',
data: {
selected: ''
}
})複数のセレクトボックス
<div id="app">
<select v-model="selected" multiple>
<option disabled value="">選択してください</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>{{ selected }}</p>
</div>new Vue({
el: '#app',
data: {
selected: []
}
})修飾子
.lazy
修飾子.lazyを利用することでバインドのタイミングを遅らせることができます。
.lazyを利用するとinputイベントのタイミングではなく、change イベントの後にデータが変更されます。
以下の例で実際に動きをみてみましょう。
入力のタイミングではなく、変更が確定したタイミングでデータの値が変更されます。（例：tabキーやenterキーを押したタイミング）
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>new Vue({
el: '#app',
data: {
message: ''
}
}).trim
修飾子.trimを利用することで入力値の前後から空白を削除できます。
<div id="app">
<input type="text" v-model.trim="message">
<p>{{ message }}</p>
</div>new Vue({
el: '#app',
data: {
message: ''
}
}).number
修飾子.numberを利用することで入力値を数値型に変換してからセットできます。
以下の例では、右のテキストフィールドに.numberを利用しています。
右のテキストフィールドの数字を入力した際は、値に10が足されます。
一方、左のテキストフィールドに入力した場合は、文字列の末尾に「10」が追加されます。
テキストフィールドに入力された値はデフォルトでは文字列となるため、このような動きになります。
<div id="app">
<input type="number" v-model="number">
<input type="number" v-model.number="number">
<p>{{ number + 10 }}</p>
</div>new Vue({
el: '#app',
data: {
number: 0
}
})
