👋

validation-observerが想定通りに動かないなと思ったときの確認事項

2022/09/16に公開

とても詰まってしまったので…

validation-providerにvidが設定されているか

validation-observerはerrorsのkeyとしてvalidation-providerのvidを利用しているので、vidが設定されていないとそのvalidation-providerのエラーを検知できません。ので設定します

vidに一意な値が設定されているか

自分はここで詰まりましたが、validation-observerに対して複数のvalidation-providerを設定している場合、それらのvidは一意でなければ後ろのproviderに上書きされてしまうので注意が必要です。

vidが一意でなかったとしてもエラー等は出なかったりするので、自分は気づくのにだいぶ時間かかってしまいました(一敗)

v-modelに値を設定する

validation-providerはv-modelの値を監視しているので、v-modelに値を設定します。

v-modelは

:value="value"
@input="()=>{value=$event}"

みたいなのと同じなので、これでも監視できます(サンプルコードは適当に書いただけなので、valueと@inputに来る値はよしなに調整して下さい)

Discussion