Vue

【Vue.js 2.9】はじめてのVue.js フォーム入力バインディング

  /

・フォーム入力項目の双方向バインディング紹介
　テキストエリア、チェックボックス、セレクトボックス

はじめに

今回はテキストボックス以外のフォーム入力項目に対する双方向バインディングの方法を紹介します。
基本的にはv-modelディレクティブを使うのですが、ものによってはVue.js側で格納するデータが違うため気をつける必要があります。

【Vue.js 2.9】はじめてのVue.js 基本構文まとめ（v-bind、v-model、v-if） ・Vue.jsの書き方、HelloWorldを画面上に出すまで・v-bind、v-model、v-ifのよく使いそうな書き方 は...

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

テキストボックス・テキストエリア

まずは簡単なテキストボックスとテキストエリアです。
こちらはVue.js側では文字列型のデータを用意します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type='text' v-model='message'>
  <p>
    {{message}}
  </p>
  <br><br>
  <textarea v-model.trim='area_msg'></textarea>
  <pre>{{area_msg}}</pre>
</div>
var app = new Vue({
    el: '#app',
    data: {
      message: '',
      area_msg: '',
    }
})

テキストボックス・テキストエリアは該当タグにv-modelを追加して、文字列型のデータを用意するだけで双方向バインディングが可能となります。

チェックボックス

続いてはチェックボックスです。
チェックボックスのデータは「Boolean」もしくは「配列」です。
Booleanの方は1つのチェックボックスに対してチェックしているかどうかを取得するために使います。

一方、配列の方は複数のチェックボックスに対してチェックしているものを配列に格納します。
後者のほうが一般的な可能性のため配列に格納するサンプルコードをまとめました。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type='checkbox' id='red' value='Red' v-model='colors'>
  <label for='red'>Red</label>
  <input type='checkbox' id='green' value='Green' v-model='colors'>
  <label for='green'>Green</label>
  <input type='checkbox' id='yellow' value='Yellow' v-model='colors'>
  <label for='yellow'>Yellow</label>
<pre>{{colors}}</pre>
</div>
var app = new Vue({
    el: '#app',
    data: {
      colors: []
    }
})

各チェックボックスに対してv-modelを記述します。
バインディングするデータは配列となり、チェックされたもののみチェックボックスのValue値が配列に格納されます。

セレクトボックス

最後にセレクトボックスです。
こちらのデータは「文字列」もしくは「配列」です。
セレクトボックスもMultiple設定で複数選択出来るためその場合は配列をバインディングする必要があります。

今回は単一選択のセレクトボックスに対するため文字列となります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
   <select v-model='selected'>
    <option disabled value="">Select Please</option>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
  </select>
  <p>
    {{selected}}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      selected: ''
    }
})

こちらもselectタグにv-modelに配列データを設定してバインディングします。

RELATED POST