Vue.js を使用する場合の入力要素とのつなぎこみを見ていきたいと思います。
表示する場合は、ビューモデルデータを {{ }} という記法を用いて表示させることができました。
ユーザが入力した内容をビューモデルデータに反映させるためには、v-model という特殊な属性を使用します。
百聞は一見にしかず、コードを見てみます。
JavaScript の方は、data に text. pulldown, radio という3つの項目があるだけです。何も処理はないため今回は methods はありません。
HTML を見てみると、<input type=”text” v-model=”text” /> というコードがあります。
この v-model=”text” が、「input に入力された内容は data の text に入れるよ」という意味になります。
data の text の値が変更されれば、テキストボックスの内容も変更されます。テキストボックスからデータ、データからテキストボックスへ、双方向にひもづけされる((Vue ではこれをバインディングといいます。この場合は双方向バインディングになります。))ということです。
テキストボックス以外でも同じようになります。上記の例ではプルダウンとラジオボタンですが、テキストボックスと同じように data とひもづけられていることが確認できるかと思います。
プルダウンやラジオボタンでは、data の方の値を設定しておくことによって、初期値を設定することができます。
例えば radio: ” となっているところを radio: ‘b’ とすれば、表示された段階で b のラジオボタンが選択されている状態になります。