v-modelディレクティブについて
v-modelディレクティブの値に、ユーザーの入力と同期させたいデータを指定します。
v-modelでは、下記二つの処理を一気に自動化することができます。これを「双方向データバインディング」と呼びます。
- 通常のデータをバインディングすること（ここまでは、v-modelを使わなくても普通にできることですよね。）
- ユーザーの入力に応じて等のイベントに基づいて、バインディングしたデータをリアクティブデータに反映させる処理（これがv-modelの肝です。）
v-modelの注意点
v-modelで使われるのはあくまで値のみで、inputタグ等のHTMLのフォームコントロールに指定してもvalueや、checked、selected等のタグの属性の値は、無視されるので注意です。なので、必ず初期値にはdata等で指定しておくようにしましょう。
仕組み
イベントハンドリングが中で起きています。なお、デフォルトではinputイベントに反応して実行されます。（なので、「v-bind」と「v-on:input」を活用してv-modelと同様に実装する事が可能です。）もしどのイベントに紐づけるかを変更したければ特殊な修飾子(lazy等)を使用する必要があります。
実装例
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <textarea v-model="msg"></textarea> <p>{{ msg }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '' } }) </script> </body> </html> |
実際の動き
下記のように、テキストエリアと連動して、他のタグの値も変わります。
input要素別v-modelに指定する文字型
「v-model=データ」の指定するデータのデータ型はinput要素別に決まっているので注意が必要です。
| inputの種類 | データ型 | 説明 |
|---|---|---|
| テキストボックス | 文字 | |
| テキストエリア | 文字 | |
| チェックボックス（単体） | boolean | true(チェック)、false(チェックなし) |
| チェックボックス(複数） | 配列 | ["チェック1","チェック2"] |
| ラジオボタン | 文字 | |
| セレクトボックス（単数） | 文字 | |
| セレクトボックス（複数） | 配列 | ["セレクト1","セレクト2"] |
オブジェクトの値も指定できる。
例えば下記のようにObjectの中の値を指定することも可能です。
|
1 |
<textarea v-model="obj.msg"></textarea> |
修飾子
.lazy
フォーカスが外れた時にデータバインディングが反映されます。厳密に言えばデフォルトだとinputイベントに反応しますが、changeイベントに反応させるようにできます。
|
1 |
<textarea v-model.lazy="obj.msg"></textarea> |
.number
「input type="number"」とHTMLのnumberを使えば数字型にする事ができますが、それを手入力等で上書きした場合はString型になってしまいます。仮に手入力されたとしても数値型にしたい場合は.number修飾子を使います。
|
1 |
<textarea v-model.number="obj.msg"></textarea> |
.trim
入力したテキストの前後に空白が入力された場合でも自動で空白を除去してくれます。
|
1 |
<textarea v-model.trim="obj.msg"></textarea> |
コンポーネント間でv-modelを使う方法
親コンポーネント
|
1 |
<子コンポーネント v-model="データ"></子コンポーネント> |
これは下記と同様の意味になります。
|
1 2 3 4 |
<子コンポーネント v-bind:value="データ" @input="データ = $event"> </子コンポーネント> |
子コンポーネント
v-modelは展開するとv-bindとしてvalueが渡ってくるので、propsで子コンポーネントで受けます。emitで親のイベントを呼びます。第二引数として親に入力データを渡します。
|
1 2 3 4 5 6 7 8 9 |
<input type="text" :value="value" @input="$emit('input',$event.target.value)" /> export default{ props["value"] } |
この記事へのコメントはありません。