フォーム入力バインディング

データと入力を同期する

テキストボックス(改行できない入力欄)

テキストエリア(改行できる入力欄)

チェックボックス

v-modelでバインドしたプロパティには真偽値が設定されます。
そこで、true-valueとfaise-valueを使うと、真偽値の代わりに任意の文字列をバインドできます。

複数のチェックボックス

複数のチェックボックスはグループ化する必要があり、グループに対して1つのプロパティをバインドします。

・単体のチェックボックスは真偽値(trueまたはfalse)
・複数のチェックボックスは文字列型の配列

グループ化したチェックボックスにバインドする

HTML

<div id="app">
<p>休日の過ごし方：{{selection}}</p>
<label>
  <input type="checkbox" v-model="answer" value="読書">読書
</label>
<label>
  <input type="checkbox" v-model="answer" value="ボルダリング">ボルダリング
</label>
<label>
  <input type="checkbox" v-model="answer" value="キャンプ">キャンプ
</label>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    answer: []
  },
  computed: {
    //チェック内容を連結した文字列を返す算出プロパティ
    selection: function () {
      return this.answer.join();
    }
  }
});

セレクトボックス(プルダウン方式)

セレクトボックスにmultiple属性をつけると複数選択可能になるがあまり使われない。単一選択と複数選択でデータの扱いが少し異なる。

カレンダー(日付の選択)

カレンダーにバインド(翌日以降の指定)

HTMLの使用上type="date"のinput要素に設定できる初期値はYYYY-MM-DD形式の文字列でないといけません。そのため、createdライフサイクルハックを使いコンポーネントがDOMに結びつく前にプロパティに初期値設定しています。min属性に最小値設定するとそれ以前の日付は選択できなくなります。

HTML

<div id="app2">
<p>ご希望日：{{request_date}}</p>
<input type="date" v-model="request_date" v-bind:min="min_date">
</div>

JavaScript

var app2 = new Vue({
  el: '#app2',
  data: {
    request_date: null,
    min_date: null
  },
  created: function() {
    //初期値設定を翌日へ
    var dt = new Date();
    dt.setDate(dt.getDate() + 1);
    this.request_date = this.formatDate(dt);
    //翌日の日付を最小値へ
    this.min_date = this.request_date;
  },
  methods: {
    //日付をYYYY-MM-DDに整形するメソッド
    formatDate: function(dt) {
      var y = dt.getFullYear();
      var m = ('00' + (dt.getMonth() + 1)).slice(-2);
      var d = ('00' + dt.getDate()).slice(-2);
      var result = y + '-' + m + '-' + d;
      return result;
    }
  }
});

レンジ入力とカラー選択

フォームコントロールの同期

HTML

<div id="app3">
<fieldset>
  <legend>色の選択</legend>
  <input type="color" v-model="color">{{color}}<br>
  赤：<input type="range" v-model.number="red" min="0" max="255">{{red}}<br>
  緑：<input type="range" v-model.number="green" min="0" max="255">{{green}}<br>
  青：<input type="range" v-model.number="blue" min="0" max="255">{{blue}}<br>
</fieldset>
</div>

JavaScript

var app3 = new Vue({
  el: '#app3',
  data: {
    color: '#000000',
    red: 0,
    blue: 0,
    green: 0
  },
  computed: {
    //赤・緑・青を配列で返す算出プロパティ
    colorElement: function() {
      return [this.red, this.green, this.blue];
    }
  },
  watch: {
    //赤・緑・青のいずれかの変更を監視する
    colorElement: function(newRGB, oldRGB) {
      //赤・緑・青を2桁の16進数表記に変換する
      var r = ('00' + newRGB[0].toString(16).toUpperCase()).slice(-2);
      var g = ('00' + newRGB[1].toString(16).toUpperCase()).slice(-2);
      var b = ('00' + newRGB[2].toString(16).toUpperCase()).slice(-2);
      //#RRGGBB形式の文字列で更新する
      this.color = '#' + r + g + b;
    },
    //カラーパレットの選択変更を監視する
    color: function(newColor, oldColor) {
      this.red = parseInt(newColor, substr(1, 2), 16);
      this.green = parseInt(newColor, substr(3, 2), 16);
      this.blue = parseInt(newColor, substr(5, 2), 16);
    }
  }
});

制御をサポートする3つの修飾子