vue.js
VeeValidate

VeeValidateでパスワードの確認欄にバリデーションをかけるとき

VeeValidateでフォームの入力項目にバリデーションを掛けていた際、次の問題に遭遇しました。

問題

・各入力欄からフォーカスが外れたタイミングでエラーを出したい
・しかしパスワード入力欄からフォーカスを外すと、パスワード確認欄にまでエラーが出てしまう

 → 確認欄のエラーは、確認欄からフォーカスが外れたタイミングで出したい

↓こんな感じです。
Edit password confirm

解決策のひとつとして、confirmed:'passwordConf'をパスワード入力欄側に指定する方法もありますが、その場合「パスワードが一致しません」エラーはパスワード入力欄側に表示されます。
入力順序的には確認欄側に出てほしかったので、別の方法を模索しました。

対応

ググりながら修正した結果がこちらになります。

Edit password confirm 2

一度フォーカスが外れたタイミングでisConfirmedをtrueにしています。
これにより、入力欄からフォーカスが外れたタイミングではエラーは表示されず、確認欄から外した時点でエラーが表示されるようになりました。