Vue.jsのフォームバインディングは、双方向データバインディングを実現するための強力な機能です。フォームの入力値とVueインスタンスのデータを同期させることで、直感的で効率的な開発が可能になります。本記事では、Vue.jsのフォームバインディングの基本から応用までを詳しく解説します。
テキスト入力のバインディング
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>テキスト入力フィールドとVueインスタンスのmessageデータを双方向にバインディングする方法です。v-modelディレクティブを使用することで、入力値が変更されるとデータが自動的に更新されます。
チェックボックスのバインディング
<div id="app">
<input type="checkbox" v-model="checked">
<p>{{ checked }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>チェックボックスとcheckedデータをバインディングする方法です。チェックボックスがチェックされるとデータがtrueに、外されるとfalseになります。
ラジオボタンのバインディング
<div id="app">
<input type="radio" v-model="picked" value="One">
<input type="radio" v-model="picked" value="Two">
<p>{{ picked }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>複数のラジオボタンとpickedデータをバインディングする方法です。選択されたラジオボタンのvalueがpickedデータに反映されます。
セレクトボックスのバインディング
<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<p>Selected: {{ selected }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>セレクトボックスとselectedデータをバインディングする方法です。選択されたオプションのvalueがselectedデータに反映されます。
複数選択のセレクトボックスのバインディング
<div id="app">
<select v-model="selected" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<p>Selected: {{ selected }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: []
}
})
</script>複数選択可能なセレクトボックスと配列データをバインディングする方法です。選択されたオプションが配列としてselectedデータに反映されます。
カスタム入力コンポーネントとのバインディング
<template id="custom-input-template">
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
</template>
<div id="app">
<custom-input v-model="message"></custom-input>
<p>{{ message }}</p>
</div>
<script>
Vue.component('custom-input', {
template: '#custom-input-template',
props: ['value']
})
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>カスタム入力コンポーネントにv-modelを使用してバインディングする方法です。カスタムコンポーネントでvalueプロパティを受け取り、入力イベントが発生したときにinputイベントを発火させて親コンポーネントに値を伝えます。
まとめ
Vue.jsのフォームバインディングは、シンプルなコードで強力な双方向データバインディングを実現します。基本的なテキスト入力から複雑なカスタムコンポーネントまで、さまざまなフォーム要素に対応できるため、効率的な開発が可能です。ぜひ、あなたのプロジェクトに活用してみてください。
