VeeValidateのバリデーション実装する心得

１、VeeValidateとは

　　簡単に言うとユーザーによって入力された値が不正な場合に、リアルタイムにエラーを表示させる機能です。

２、 簡単な例

<validation-observer ref="obs" v-slot="{ invalid }">
    <label>名前</label>
    <validation-provider name="名前" rules="required">
      <div slot-scope="ProviderProps">
        <input v-model="name">
        <p class="error">{{ errors[0] }}</p>
      </div>
   </validation-provider>
</validation-observer>

フォーム全体は<validation-observer>タグで囲む、inputのところに<validation-provider>タグで囲む。

３、実際のプロジェクトから学んだこと

　　上記のように一つ一つのinputをチェックするのが簡単ですが、複数のinputの結果によってバリデーションしたい時にはですが、<validation-provider>タグの中に複数のinputを入れても一番最初のinputだけチェックされている。

＊そうしたら、複数のinputのv-modelを結合して、結合したinputに対してバリデーションすればうまくできそうです。ただ、結合したinputにはユーザーに見せてはいけないので、inputにtype = 'hidden'を追加し、また、すごく重要なところですが、<validation-provider>に  : immediate='true'　属性を追加する必要があります。なぜなら、<validation-provider>タグには基本対象のinputがフォーカスされた時点から効くらしいですので、inputにtype = 'hidden'を追加したため、当然ユーザーがそのinputをクリックできないです。:immediate　を追加すると、つまりすぐ効いてくださいみたいな命令ですね。しかし、そうすると、イニシャル画面で、エラーメッセージが表示されることになってしまいました。