[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プログラマ