Posted in vuejs

[Vue.js] フォーム入力バインディング一覧

   Published Date: 2020年5月1日

Vue.jsではDOMベースでテンプレートを実装しています。Vue.jsにはデータバインディングという仕組みが有り、データそのものと画面への描画をリアルタイムで同期できます。その機能を実現しているのが「バインディング」です。

テキストボックスに入力した文字が、すぐにその下にリアルタイムで表示されるような簡易掲示板はすぐに作ることができます。

jQueryでやっていたときは、Ajaxを使って、フォームの入力値を描画するというステップを踏まなければなりませんでしたが、Vue.jsではHTMLタグに少しの追加を行うだけで実現できます。慣れるとリアルタイム描画がフォームを作成するのと同じような感覚でとても楽です。

テキスト

テキストボックスに文字を入力すると、リアルタイムでその下に入力した文字が表示されるというシンプルなプログラムです。

<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue Form</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>

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

    <script>
const app = new Vue({
  el: "#app",
  data: {
    value: ''
  }
})
    </script>
  </body>
</html>

HTMLのinputタグを作り、その中に v-model=”プロパティ名” を記載します。

そのすぐ下に描画部分を記載します。
<p>{{value}}</p>
これでpタグの中にテキストボックスに入力した文字が出力されます。

あとはVueインスタンスの設定を行っていきます。

const app = new Vue({
el: “#app”,
data: {
value: ”
}

Vueインスタンスを作成し、valueというプロパティを設定しておきます。中身は空でOKです。
※ value: ”に文字を入れて、 value=’入力して下さい’ としておくと、フォームに初期値として文字が入力された状態になります。

テキストエリア

テキストは1行だけの入力なので、少し長い文章を入力させるフォームはテキストエリアを使います。

<div id="app">
  <textarea v-model="value"></textarea>
  <p>{{value}}</p>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      value: '',
    },
  });
</script>

こちらはinputタグの部分をtextareaタグに変更すればOKです。

ラジオ

    <div id="app">
      <input id="radio1" type="radio" v-model="value" value="1" /><label
        for="radio1">radio1</label>
      <input id="radio2" type="radio" v-model="value" value="2" /><label
        for="radio2">radio2</label>
      <input id="radio3" type="radio" v-model="value" value="3" /><label
        for="radio3">radio3</label>
      <p>{{value}}</p>
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: '3',
        },
      });
    </script>

ラジオはインプットタグの中にv-model=”プロパティ名”という形でタグを作ります。

2020-05-01_10h27_31

ラジオボックスをクリックすると、その番号が下に表示されます。
ここで表示されるのはvalueの値になります。

チェックボックス

チェックボックスは、1つだけの場合、複数の場合で設定方法が少し異なります。まずは複数の場合から見てみましょう。

複数の場合

    <div id="app">
      <input id="checkbox1" type="checkbox" value="1" v-model="value" /><label
        for="checkbox1">checkbox1</label>
      <input id="checkbox2" type="checkbox" value="2" v-model="value" /><label
        for="checkbox2">checkbox2</label>
      <input id="checkbox3" type="checkbox" value="3" v-model="value" /><label
        for="checkbox3">checkbox3</label>
      <p>{{value}}</p>
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: ['3'],
        },
      });
    </script>

チェックボックスにv-model=”プロパティ値”を記載します。こちらはラジオと一緒です。

Vueインスタンスのvalueの値は[‘3’]というように、配列で指定します。これを配列にしないで ‘3’ と記載するとチェックボックスの下に 3 true false のような文字が表示されてしまい、思ったようになりません。
配列で指定することによってチェックされている数字が下にうまく表示されます。

[表示例]
2020-05-01_10h38_16

単一の場合

    <div id="app">
      <input id="checkbox1" type="checkbox" value="1" v-model="value" /><label
        for="checkbox1">
      <p>{{value}}</p>
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: true,
        },
      });
    </script>

セレクト

複数の場合

    <div id="app">
      <select v-model="value" multiple>
        <option value="1">value 1</option>
        <option value="2">value 2</option>
        <option value="3">value 3</option>
        <option value="4">value 4</option>
      </select>
      <p>{{value}}</p>
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: [],
        },
      });
    </script>

複数選択の場合セレクトタグにmultipleを付加するのがポイントです。
<select v-model=”value” multiple>
セレクトボックスに v-model=”プロパティ値” を記載し、バインディングが使えるようにします。

Vueインスタンスのvalueは []とし、配列を指定しておきます。

[表示]
2020-05-01_11h35_18

単一の場合

    <div id="app">
      <select v-model="value">
        <option value="1">value 1</option>
        <option value="2">value 2</option>
        <option value="3">value 3</option>
        <option value="4">value 4</option>
      </select>
      <p>{{value}}</p>
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: '',
        },
      });
    </script>

単一選択の場合は multipleを外し、Vueインスタンスのvalue値を ” にします。

データピッカー

インプットフォームに日付を上下できるボタンが出るようになります。日付入力のときはこのようなインターフェースのほうがユーザビリティが向上して良いですね。

    <div id="app">
      <input type="date" v-model="value" />
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: '2020-01-01',
        },
      });
    </script>

[画面]
2020-05-01_11h40_58

カラーピッカー

色を選択するカラーピッカーを立ち上げることもできます。

    <div id="app">
      <input type="color" v-model="value" />
    </div>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          value: '#ff0000',
        },
      });
    </script>

[画面]
2020-05-01_11h48_41

まとめ

このような感じでインタラクティブなフォームを簡単に作ることができます。Vue関数でHello Worldを表示するぐらいだとあまりVueのメリットを感じないですが、このようにフォームを簡単に作れるのを見るとVueの便利さを実感できますね。



Author: webmaster