【Vue.js入門】16_フォーム入力バインディング

Vue.js入門第16回。今回はフォーム周りのデータバインディングを確認してみます。

はじめに

既にテキストボックスでは確認していますが、各種フォームのパーツでデータバインディングを確認してみます。

v-modelディレクティブでデータバインディングを行いますが、v-model利用時はvalue、checked、selected属性は無視されます。

サンプルではvalue属性に"fugafuga"を指定していますが無視されていることがわかります。

テキストエリアはマスタッシュ構文で書いてしまいがちですが、v-modelディレクティブを使用する必要があります。

「双方向データバインディングはv-model」だと覚えやすいと思います。

チェックボックスは要素数によって管理方法が異なります。1つの場合は真偽値で管理し、複数の場合は配列で管理します。

サンプルで、チェックが1つの場合はtrue/falseが切り替わり、複数の場合は配列にvalue値が追加/削除されることが確認できます。初期チェック状態も配列で指定することが可能です。

ラジオボタンは文字列で管理されます。

選択したラジオボタンのvalueがプロパティに設定されていることが確認できます。初期チェック状態もプロパティで指定することが可能です。

セレクトボックスはチェックボックス同様、要素数によって管理方法が異なります。1つの場合は文字列で管理し、複数の場合は配列で管理します。

選択したオプションのvalue値がプロパティに設定されていることが確認できます。

データバインディング時に修飾子を利用することが出来ます。修飾子は以下のものがあります。

lazy修飾子はバインドのタイミングを遅延させる際に使います。

サンプルではv-modelディレクティブにlazy修飾子を付与していますが、こうすると入力中はバインドされずタブなどでフォーカスアウトしたタイミングでバインドされることが確認できます。

trim修飾子は入力値の前後にある空白（全角、半角どちらも）を削除して反映させます。

サンプルではv-modelディレクティブにtrim修飾子を付与していますが、文字列の先頭に空白を入力してもトリムされてバインドされることが確認できます。

number修飾子は入力された数値を数値型に変換してから反映させます。で指定しても入力値は文字列で取り扱われますが、これを回避するために使います。

サンプルでは入力された数値に１０加算した数値を表示していますが、number修飾子を付与していない方は文字列として扱われうまく計算されていません。付与している方は正常に計算されていることが確認できます。

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。