【Vue.js 入門】フォーム入力をバインドする

今回は、フォーム入力バインディングについて紹介します。

Vue.js の書き方を最初から知りたいという方はこちら(^^)

参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ！！

Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです！Vue.jsのツボとコツがゼッタイにわかる本...

フォーム入力バインディングとは
バインド方法

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

コンポーネントが持つデータと、ユーザーがフォームに入力した内容を双方向にバインドする機能です。

通常では、コンポーネントのプロパティ値を変更するとバインドされているDOM要素の内容も変更されますが、その逆はできません。

つまり、「プロパティ値を変更　→　DOM要素の内容を変更」という一方通行ですね。

しかし、フォーム入力バインディングを使うことで、

「プロパティ値を変更　→　DOM要素の内容を変更」と、
「DOM要素の内容を変更（ユーザーがフォームに入力）　→　プロパティ値を変更」というように双方向にバインドすることができます。

バインド方法

< 要素　v-model=” プロパティ名 “>

サンプルでは、双方向にバインドしてることを確認するため、v-model を記述した要素と記述していない要素を用意し比較します。

<div id="app">
  <input type="text">
  <p>{{message1}}</p>
  <input type="text" v-model="message2">
  <p>{{message2}}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message1: 'Hello',
    message2: 'Hello'
  }
});

初期値として message1, message2 プロパティに ‘Hello’ を入れた状態で入力欄に文字を入力してみます。

すると、

v-model を記述していないインプット入力欄に文字を入力しても、下の ‘Hello’ が変化していませんが、
v-model を記述している方は文字が入力される度に内容が更新されています。

この状態の message1, message2 プロパティ値をコンソールで確認すると、

message1プロパティは ‘Hello’ のままであるのに対し、
message2プロパティは ‘Good bye’に替わっていることがわかりますね。

これで、v-model が双方向にバインドするということが確認できました。

v-model を指定したフォームコントロールでは、value 属性や checked 属性、selected 属性などで設定した初期値が無視され、バインドしているコンポーネントのデータが優先されます。

そのため、data オプションで初期値を設定しておく必要があります。

チェックボックス

単体のチェックボックスを扱う場合と、複数のチェックボックスをグループとして扱う場合とで、使い方が少し異なります。

まずは単体のチェックボックスから見てみます。

単体のチェックボックス

v-model でバインドしたプロパティには真偽値が設定されます。
（チェックをつけると true、つけないと false ）

サンプルを見てみましょう。

<div id="app">
  <input id="notRobot" type="checkbox" v-model="answer">
  <label for="notRobot">私はロボットではありません</label>
  <p>{{answer}}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    answer: ''
  }
});

ブラウザの表示結果↓

answer プロパティは初期値は空でしたが、チェックボックスにチェックをつけたり外したりすることで true や false という真偽値がプロパティ値になっていることが確認できました。

真偽値ではなく文字列をバインドしたい場合は、true-value と false-value という属性を使うことで真偽値の代わりに任意の文字列をバインドできます。

<div id="app">
  <input id="notRobot" type="checkbox" v-model="answer" true-value="はい、違います" false-value="いいえ、ロボットです">
  <label for="notRobot">私はロボットではありません</label>
  <p>{{answer}}</p>
</div>

Javascript は変更なし

ブラウザの表示結果↓

また、バインドしているプロパティの初期値に、 true-value 属性で設定している文字列を指定することで、最初からチェックが入った状態にすることができます。

var app = new Vue({
  el: '#app',
  data: {
    answer: 'はい、違います'
  }
});

HTMLは変更なし

ブラウザでは最初からチェックが入った状態↓

複数のチェックボックス

アンケートの回答などで複数選択を可能とする場合は、ひとつひとつのチェックボックスに別々のプロパティをバインドするのではなく、グループに対して一つのプロパティをバインドします。

バインドしたプロパティは、チェックを付けたチェックボックスの value 値を配列要素とする配列になります。

サンプルを見てみましょう。

<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>

var app = new Vue({
  el: '#app',
  data: {
    answer: []
  },
  computed: {
    selection: function() {
      return this.answer.join();//配列要素をコンマで区切り文字列に変換
    }
  }
});

バインドしたプロパティが配列名になるため、あらかじめ answer: [ ] で空の配列を用意しておきます。

ブラウザの表示結果↓

確認のため、コンソールで配列要素を見ておきます。

チェックを付けたチェックボックスの value 値が配列要素になっていますね。

ラジオボタン

複数のチェックボックスのときと同様です。

ただ、ラジオボタンは一つしか選択できないので、バインドしたプロパティは文字列型になります。（配列ではありません）

いくつかの選択肢から一つを選ぶサンプルを見てみます。

<div id="app">
  <p>あなたの年齢は？：{{answer}}</p>
  <label><input type="radio" v-model="answer" value="20代">20代</label>
  <label><input type="radio" v-model="answer" value="30代">30代</label>
  <label><input type="radio" v-model="answer" value="40代">40代</label>
  <label><input type="radio" v-model="answer" value="50代">50代</label>
</div>

var app = new Vue({
  el: '#app',
  data: {
    answer: '選択してください'
  }
});

ラジオボタンを選択するまでは answer プロパティの初期値の ‘選択してください’ が表示されており、選択するとその value 値が表示されます。

セレクトボックス

セレクトボックスにも単一選択と、あまり見かけませんが複数選択があります。まずは単一選択から見ていきましょう。

単一選択の場合

サンプルを見てみます。

<div id="app">
  <p>あなたの年齢は？：{{answer}}</p>
  <select v-model="answer">
    <option disabled value="">選択してください</option>
    <option value="20代">20代</option>
    <option value="30代">30代</option>
    <option value="40代">40代</option>
    <option value="50代">50代</option>
  </select>
</div>

var app = new Vue({
  el: '#app',
  data: {
    answer: ''
  }
});

ブラウザの表示↓

複数選択の場合

複数選択の場合は、バインドするプロパティが配列になるため、data オプションに配列を用意しておくようにしましょう。

サンプルを見てみます。

<div id="app">
  <p>当店を何で知りましたか？：{{selection}}</p>
  <select v-model="answer" multiple>
    <option value="新聞・雑誌の記事">新聞・雑誌の記事</option>
    <option value="インターネット広告">インターネット広告</option>
    <option value="知人の紹介">知人の紹介</option>
  </select>
</div>

var app = new Vue({
  el: '#app',
  data: {
    answer: []
  },
  computed: {
    selection: function() {
      return this.answer.join();//配列要素をコンマで区切り文字列に変換
    }
  }
});

ブラウザの表示↓