はじめに

この記事はVue.jsの基本は抑えられている程で、話を進めていきます。もしVue.jsを初めて触ると言う方は、こちらの記事を参照していただければと思います。

⬇️**【写真とコード付き】Vue.jsの構築から基本的な書き方まで1から解説【超初心者向け】**
https://qiita.com/yuki4839/items/62f40564e3f4c8dbfc51

さて今回は、主にフォームタグに活用する v-model ディレクティブについて、詳しく解説していきます。

早速いきましょう。

実行環境

使用ツール、デバイスはこちら

Google chrome
Mac OS Catalina
Visual Studio Code

また今回使用するディレクトリ階層はこちら。

ディレクトリ階層

─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js

各ファイルの初期値はこちら。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <div id="web">
    <p>
      {{ context }}
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>

style.css

/* 出力結果を見やすくするためのスタイルです */
body {
  background-color: #add8e6;
}

# web {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
  width: 300px;
}

main.js

const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})

現時点での出力結果はこちら。

v-model

まず v-model ディレクティブについて簡単に説明すると、inputタグなどで入力された文字を、リアルタイムで Vue.js 側に渡す事ができるディレクティブになります。

text

v-model ディレクティブで最も基本的な処理が、inputタグのtextタイプでの入力した値を、 Vue.js 側に渡す処理になります。

文章で伝えるよりも、コードを見て理解してもらうのが早いと思いますので、まずは実際のコードをご覧ください。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <p>
      <input type="text" v-model="message">
    </p>

    <!-- 確認用に Vue.js の値を表示 -->
    <pre>{{ $data }}</pre>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>

main.js

var web = new Vue({
	el: '#web',
  data: {
  	message: 'Hello Vue.js!'
  }
})

ポイントは、タグの属性に v-model を使用して、属性値の部分に Vue.js で定義したキーを代入する部分です。

これによって、inputタグで入力した値が、リアルタイムで Vue.js の message に反映されるようになります。

では動作確認です。
最初の画面はこちら。

では、inputタグに「Hello World!」と入力してみます。
その結果がこちら。

このように、inputタグなどで書いた値が、リアルタイムで Vue.js 側に反映されることを、双方向データバインディング と言います。

そして、これを実現するディレクティブが、v-model ディレクティブと言うことになります。

textarea

次にtextareaタグでの 双方向データバインディング の書き方はこちら。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <textarea v-model="message">{{ message }}</textarea>

    <pre>{{ $data }}</pre>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>

main.js

var web = new Vue({
	el: '#web',
  data: {
  	message: 'Hello Vue.js!'
  }
})

ポイントは、textareaタグの場合はタグの中に、マスタッシュ構文 で挿入する必要がある点です。(これが無ければ正常に動作する事ができません。)

では動作確認です。
最初の画面はこちら。

では、textareaタグに「Hello World!」と入力してみます。
その結果がこちら。

因みに "\n" とあるのは改行になります。

checkbox

次はチェックボックスでの 双方向データバインディング についてです。まず実際のコードは以下の通りになります。

index.html

<body>

  <div id="web">
	<input type="checkbox" id="checkbox" v-model="checked">
	<label for="checkbox">{{ checked }}</label>
	<pre>{{ $data }}</pre>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>

main.js

var web = new Vue({
  el: '#web',
  data: {
    checked: false
  }
})

ポイントは、checkboxタイプのinputタグに v-model="checked" を挿入している部分になります。これによって、チェックが入れられると、Vue.js のcheckedが true にリアルタイムで書き換えられます。(逆も同じ)

では動作確認です。
最初の画面はこちら。

ではチェックを入れます。

そしてチェックを外すと、先ほどの false と同じ状態になります。

radio

次はラジオボタンでの 双方向データバインディング についてです。まず実際のコードは以下の通りになります。

index.html

<div id="web">
	<select v-model="selected">
		<option disabled value="">Please select one</option>
		<option>Red</option>
		<option>yellow</option>
		<option>Green</option>
	</select>
	<p>{{ selected }}</p>
</div>

main.js

var web = new Vue({
  el: '#web',
  data: {
    selected: ''
  }
})

ポイントは、selectタグに v-model 属性を使用する事です。これにより、選択した値が Vue.js にリアルタイムで書き換えられます。

では動作確認です。
最初の画面はこちら。

では選択をします。
まずはRedです。

続いてyellowです。

最後にGreenです。

このように選択した値が、代入される仕組みを作る事ができます。

option

最後に v-model に関するオプションをいくつか解説していきます。

lazy

こちらは 双方向データバインディング を行うタイミングを、遅延させる事ができるオプションです。

実際のコードはこちら。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>

main.js

var web = new Vue({
  el: '#web',
  data: {
    message: ''
  }
})

ポイントは、v-model に .lazy と追記する事です。これにより、入力した値からカーソルが離れるまで、双方向データバインディング がされないようにする事ができます。

では動作確認です。
最初の画面はこちら。

次に「Hello Vue.js!」と入力。

ご覧のように、カーソルが離れない限りは、双方向データバインディング がされません。

カーソルを離した結果がこちら。

このように、値の確定を遅延させる事ができます。

trim

こちらは 双方向データバインディング を行う際に、空白スペースを除去する事ができるオプションです。(半角全角どちらも)

実際のコードはこちら。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <input type="text" v-model.trim="message">
    <p>{{ message }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>

main.js

var web = new Vue({
  el: '#web',
  data: {
    message: ''
  }
})

ポイントは先程と同じく、v-model に .trim と追記する事です。これにより、入力した値の前後の空白を、双方向データバインディング がされる際に除去できます。

では動作確認です。
最初の画面はこちら。

次に前後に空白を付けて、「Hello Vue.js!」と入力。

このように、空白を除去する事ができます。

まとめ

以上が v-model ディレクティブによる、双方向データバインディング の記述方法になります。もう一度まとめておくと、以下の通りになります。

text
- input type="text" v-model="message"
textarea
- textarea v-model="message"
  (タグ内にマスタッシュ構文)
checkbox
- input type="checkbox" id="checkbox" v-model="checked"
radio
- select v-model="selected"
option
- lazy
  - input type="text" v-model.lazy="message"
- trim
  - input type="text" v-model.trim="message"

ぜひ実際にコードを書いて見てください！
最後まで読んでいただき、ありがとうございました！

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack