Vueを使っている際に、配列やオブジェクト(連想配列)を繰り返して表示するリストレンダリングをする場合があります。そのような場面で便利なVueのv-modelディレクティブについて解説します。

Vueのv-modelディレクティブとは？

Vueでアプリケーション作成をする際にインプット要素などでのユーザー入力の値をVueで取得したい。という場面があったりすると思います。そんな時に使えるのがVueのv-modelディレクティブです。例えばログイン画面でユーザーが入力した値を取得したい…などの場面です。

v-modelディレクティブを用いればユーザーが入力させた値を格納する変数を宣言することで、これを実現してくれます。

Vueのv-modelディレクティブの使い方

それでは実際にv-modelディレクティブの書き方について説明していきます。

Vueのv-modelディレクティブの書き方

v-modelは次のように書きます。

(app.js)

new Vue({
 el: "#app",
 data: {
   value: ""　//valueに入力した値を代入するとした場合
 },
 template: `
 <div>
   <input type="text" v-model="入力した値を代入させたい変数"/>
   <div>入力した値：{{ value }}</div> //実際にvalueを表示させてみる
 </div>
 `
})

実際にinput要素に文字を入力してみると次のように表示されます。

Vueのv-modelの実装例

もう少し高度な例をご紹介します。入力フォームなどで利用できるテンプレ機能を例に挙げてみましょう。

(app.js)

new Vue({
 el: "#app",
 data: {
   msg: "",
 },
 methods: {
   writeTempalte: function () {
     this.msg = "初めまして（氏名）です。本日はお忙しい中お会いしていただき誠にありがとうございます。是非またお会いしましょう！"
   }
 },
 template: `
 <div>
   <div>
     <p>確認用：{{ msg }}</p>
     <textarea v-model="msg"></textarea>
   </div>
   <button v-on:click="writeTempalte">テンプレートを用いる</button>
 </div>
 `
})

このようすることで変数msgに動的に文字列を代入してテンプレをテキストエリア内に入力することができます。さらに変数msgにはテキストエリア内の文字列が代入されるため、画面に変数msgが表示されることで入力内容が確認できるようになります。

様々な入力値のバインディング

前項ではテキストタイプの入力値のバインディングをしましたが、Vueではその他の入力値のバインディングも実現できます。本項ではチェックボックスとラジオボタンとセレクトボックスでのバインディング方法についてご紹介いたします。

チェックボックスのバインディング

チェックボックスが単体で利用されている場合はboolean値を値としてバインディングします。

(index.html)

<div id='example'>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

(app.js)

new Vue({
  el: '#example',
  data: {
    checked: ''
  }
})

チェックボックスが複数ある場合はチェックされた値を配列に入れることができます。

(index.html)

<div id='example'>
  <input type="checkbox" value="太郎" v-model="checkedNames">
  <label for="jack">太郎</label>
  <input type="checkbox" value="次郎" v-model="checkedNames">
  <label for="john">次郎</label>
  <input type="checkbox" value="三郎" v-model="checkedNames">
  <label for="mike">三郎</label>
  <span>Checked names: {{ checkedNames }}</span>
</div>

(app.js)

new Vue({
  el: '#example',
  data: {
    checkedNames: []
  }
})

ラジオボタンのバインディング

ラジオボタンでは選択された値をバインディングできます。

(index.html)

<div id='example'>
  <input type="radio" id="taro" value="太郎" v-model="pickedName">
  <label for="taro">太郎</label>
  <input type="radio" id="jiro" value="次郎" v-model="pickedName">
  <label for="jiro">次郎</label>
  <p> {{ pickedName }}</p>
</div>

(app.js)

new Vue({
  el: '#example',
  data: {
    pickedName: ''
  }
})

セレクトボックスのバインディング

セレクトボックスでは選択されたオプションの値がバインディングされます。

(index.html)

<div id='example'>
  <select v-model="selectedName">
    <option disabled value="">名前を選択</option>
    <option>太郎</option>
    <option>次郎</option>
    <option>三郎</option>
  </select>
  <span>{{ selectedName }}</span>
</div>

(app.js)

new Vue({
  el: 'example',
  data: {
    selectedName: ''
  }
})

Vueのv-modelディレクティブの仕組み

v-modelディレクティブはユニークな機能ではなく、v-bindディレクティブとv-onディレクティブの機能をまとめて双方向のデータバインディングを実現している糖衣構文（記法を簡略なものにした構文）です。input要素などのvalue属性をv-bindでバインディングし、changeイベントに対してVueの変数にvalue属性の値を代入することで実装できます。したがって2.2項の内容は次のようにも記述できます。

(app.js)

new Vue({
 el: "#app",
 data: {
   msg: "",
 },
 methods: {
   writeTempalte: function () {
     this.msg = "初めまして（氏名）です。本日はお忙しい中お会いしていただき誠にありがとうございます。是非またお会いしましょう！"
   }
 },
 template: `
 <div>
   <div>
     <p>確認用：{{ msg }}</p>
     <textarea      v-bind:value="msg"      v-on:change="msg = $event.target.value"></textarea>
   </div>
   <button v-on:click="writeTempalte">テンプレートを用いる</button>
 </div>
 `
})

changeイベントが発生するとmsg変数にインプット要素のvalue属性を代入します。反対にv-bindでvalue属性とmsg変数を紐づけておくことで双方向のバインディングを可能にしています。この仕組みを理解することはコンポーネント間で双方向のデータバインディングを実装しようとした際に大変重要になります。

この記事のまとめ

本記事ではVueのv-modelディレクティブを、実際の実装例を元に説明しました！最後に記事の要点をまとめてみましょう。

• v-modelディレクティブを用いることでユーザーが入力した値をVueで取得することができます。
• テキスト以外のインプット要素やセレクトボックスからも同様にユーザーが入力した値を取得することができます。
• v-modeディレクティブlはv-bindディレクティブとv-onディレクティブの機能を合わせた糖衣構文である。

Vueのv-modelディレクティブを是非活用してみましょう！