2017-10-22

[Vue.js]フォームの必須バリデーション実装例

バリデーション関係はプラグインが結構あり、本来はそれを使うべきなんだろうけど勉強がてら実装。

細かいバリデーションはまだややこしいので必須チェックのみ。

Demo

詳細

オブジェクトをループ処理したい場合は keys を上手く使う

算出プロパティのisValidでやっているが、Object.keys(someObject)でキーの配列が取得出来るので、それに対して処理を行うことでオブジェクトの全キーに対して処理をすることが出来る。

for inは色々罠が多くて正直使いたくないのでこっちを覚えておきたい。

コンポーネントの model オプション

<my-component v-model="hoge"></my-component>

このようにコンポーネントに対し v-model を使った場合、これは以下の糖衣構文になる。

<my-component
  :value="hoge"
  @input="function() { hoge = value; }"
></my-component>

このまま使ってもいいが、コンポーネントにvalueというプロパティを v-model とは別に渡したい時などに困る。

その際は、コンポーネントのmodelオプションを利用すればいい。

radio-componentでは以下のように記述している。

Vue.component('radio-component', {
  template: '#tpl-radio',
  props: {
    value: {
      type: String,
      default: '',
    },
    model: {
      type: String,
      default: '',
    },
  },
  model: {
    prop: 'model',
    event: 'update',
  },
});

radio-componentにはプロパティとしてvalueを使いたいため、modelオプションで v-model ではmodelプロパティをバインディングするよう変更している。

自作コンポーネントに対し v-model を適用するような場合、明示的にバインディングするプロパティを指定するためにmodelプロパティは指定するよう意識づけたほうがいいかもしれない。

参考

Vue.js のカスタムコンポーネントで radio ボタンを使う - つくりおき

[Vue.js]Bootstrap と Vue.js でイケてるフォームを実装する - atuweb : つながりを作る Web プログラマ