今回はVue.jsでフォームの入力値を扱う方法を紹介します。
Notice
記事中のCodePenは右上の "Edit on CodePen" からコード編集画面に遷移できます。
ぜひ手元でコードを変えて結果を確かめてみてください。理解が早まると思います。
前提
| マシーン | ブラウザ | Vue |
|---|---|---|
| macOS Sierra 10.12 | Firefox Quantum | ver. 2.5 |
フォーム入力バインディング
Vue.jsでは v-model という属性を使って、フォームの入力値とVue内のデータを結びつけます。マニュアルで使われている「バインディング」という言葉は「結びつける」「関連づける」という意味ですね。
（以下のCodePenではBootstrapを使用しています。HTMLのクラスは全てスタイルのためのものです。）
文字入力（テキストボックス、テキストエリア）
See the Pen Vue Form Text by Masahiro Harada (@MasahiroHarada) on CodePen.
フォームの入力要素に v-model 属性を記述しています。v-model 属性の値は data プロパティに含まれるデータの名前です。たったこれだけの設定で、フォームの入力値をVue内のデータに結びつけることができます。
「結びつける」とはどういうことでしょうか？
CodePenのテキストボックスやテキストエリアに文字を入力してみてください。隣のカラムに入力値がリアルタイムで表示されるはずです。入力値が表示されたカラムのHTMLには {{ message }} または {{ description }} と記述されており、二重波カッコのテンプレート記法でデータの値を参照しています。
「結びつける（＝バインディング）」とはつまり、フォームに入力された値が v-model 属性で指定されたデータに自動的に反映されるということです。フォームに入力された値（テキストボックスなら文字）が変わると、データの値も自動的に変わります。
フレームワークを使わずにこれと同じ挙動を再現すると、onChangeイベントを利用することになるでしょう。しかしVue.jsではその必要はありません。v-model で指定されたデータは常にその時点での入力値を保持しています。
そのほかのフォーム入力要素についても簡単に見ていきましょう。
セレクトボックス
See the Pen Vue Form Select by Masahiro Harada (@MasahiroHarada) on CodePen.
<select> に v-model 属性を記述すると、v-model で指定されたデータには選択された <option> 要素の value 値が反映されます。
上の例のように data プロパティにあらかじめ値を設定しやると、フォームに初期値を与えることができます。
チェックボックス
See the Pen Vue Form Checkbox by Masahiro Harada (@MasahiroHarada) on CodePen.
v-model で指定されたデータにはチェックされているかどうかを表す真偽値が反映されます。
または、二つ目の例のように一連のチェックボックスに同じデータを指す v-model を記述すると、value 値を配列で取得することも可能です。
ラジオ
See the Pen Vue Form Radio by Masahiro Harada (@MasahiroHarada) on CodePen.
ラジオボタンの場合もチェックボックスの二つ目の例とほとんど同じですね。 ラジオボタンでは複数選択はしないので値は配列にはなりません。
ファイル
See the Pen Vue Form File by Masahiro Harada (@MasahiroHarada) on CodePen.
上の例で見られる通り v-model ではダミーのパス文字列が返るだけでファイルそのものは受け取れません。
ファイルの場合は input の change イベントに対するハンドラ関数でイベントオブジェクトを引数に受け取り、そこからファイルを取り出さなくてはいけません。
<input type="file" id="upload" />
<script>
function handleFileSelect (event) {
var files = event.target.files
// その他の処理が続く...
}
var elem = document.getElementById('upload')
elem.addEventListener('change', handleFileSelect, false)
</script>
参考
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Vue.jsでの例については次回イベントを扱う際に紹介したいと思います。
その他
See the Pen Vue Form Other by Masahiro Harada (@MasahiroHarada) on CodePen.
<input> の type="date" と type="range" も試してみました。
date では日付を表す文字列が取得できています。また、range では範囲内の数値を取得できます。
その他の<input> のタイプについても v-model は利用できるはずです。
以上、Vue.jsでフォームの入力値を扱う方法を紹介しました。
より詳しくは、マニュアルを参照してください。
フォーム入力バインディング — Vue.js
