1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

Vue.jsとVueValidateのよく使う機能のメモ書き

Vue.js

代表的なオプション

components: {
  searchForm
}

のように設定すると

<search-form></search-form>

このように呼び出すことが出来る。

JS側はキャメルケースでもハイフンでも大丈夫だが、HTML側ではハイフン区切りで呼ぶ出す必要がある

代表的なディレクティブ

v-on

  • イベントハンドリング
  • v-on:inputのようにすると入力イベントを受け取る
  • v-onとv-bindはよく使うので省略記法が用意されている
  • v-on:clickは@clickと書ける
  • イベント修飾子で@submit.prevent=“onSubmit"のように書くとSubmit時にリロードしない等できる

v-bind

  • HTML属性をモデルの更新でリアルタイムに更新する
  • v-bind:classはよく使う
  • :classに省略して書ける

v-bind:selected

  • :selectedで書ける
  • selected=“{{ hoge == fuga }}"と書くと怒られる
  • :selected=“hoge == fuga” とv-bindを使って{{}}は使わずに文字列で条件式を書くとうまくいく

v-model

  • 双方向データバインディング
  • ビューの入力内容をモデルに反映、モデルの変更をビューに反映という使い方ができる
  • v-model.trimのようにするとユーザーの入力を自動でトリムしてくれる
  • 入力値をリアルタイムにバリデーションをかけたい時にもv-modelだと便利
  • ユーザーの入力値をそのまま保存に使いたい時にも便利。本来はReactのように親コンポーネントに値を渡してstateを更新のような実装が状態管理としては良いんだけど、実装コストをかけずにサクッと作りたい時に良い。

v-cloak

<div v-cloak>
  {{ message }}
</div>

v-for

  • ループを回すのに使う
<option v-cloak v-for="data in list" :value="data.id" :key="data.id">
</option>
  • 必ずユニーク値で:keyをつける

VueValidate

  • $vにバリデーションデータが入っている

代表的なメソッド

  • $touch
    • $v.name.$touchのようにすると$dirtyフラグをtrueにする
    • これによりエラー検知の対象になる

代表的なプロパティ

  • $dirty
    • 一度も触っていない場合はこのフラグはfalse
    • 一度でも変更を加えるとtrueになる
  • $error
    • $v.name.$errorのように項目ごとにエラーフラグをとれる
    • $dirtyがtrueになっていないと、このフラグが無視される

エラーメッセージを動的に出す

  • 各バリデーションルールのフラグがとれるので、その値を見て用意したエラーメッセージを表示する
<span v-if="$v.title.$error && !$v.title.required">
タイトル名は必須です</span>
  • コレクションデータの場合でも1つずつtouchする必要はなく、$v.array.$touch()だけでOK