【Vue】vee-Validatorのメッセージをリセット
vee-Validatorの副作用
こんにちは！大ちゃんの駆け出し技術ブログです。
今日は文章量少なめです💦
PF制作時にvee-Validatorのフォームで少し困ったことがありました。
下記のように入力フォームにバリデーションをしていたとします。未入力の場合バリデーションメッセージを表示すると言うものですね。
この入力フォームはvuetifyのダイアログを使用していたのですが、この入力フォームは閉じる時に値のリセットを行います。
clearTextBlock() {
this.textFormat = {};
},
しかし、これを行うと不具合が生じました。
何も入力しないでダイアログを閉じて再度入力フォームを開くと、バリデーションメッセージが表示された状態で開かれてしまいます。
何も入力しないでダイアログを閉じる
↓
ダイアログを開く
これが起きる理由として、clearTextBlockメソッドが実行されることでフォームが空になったと認識されてしまうためです。空になったと認識されれば、フォームに指定しているValidationProviderが実行されてしまい、未入力と判断されてしまいます。結果、再度ダイアログを表示した時に、バリデーションメッセージが表示されてしまうわけです。
解決方法
これについては解決方法が複数あるようでしたが、公式の情報を参考に実装しました。
Validation Observer | VeeValidate
フォームの値を空にする処理の後に、vee-Validatorのバリデーションを一度リセットすることができる処理を入れます。
clearTextBlock() {
this.textBlock = {};
this.$refs.observer.reset();
},
これにより、ダイアログを閉じる際に表示されていたバリデーションメッセージが消え、次に開く時にはバリデーションメッセージが表示されていないダイアログを表示できます。
意外と簡単に解決できてよかったです。
参考文献
コメント
次はいよいよ50記事目です！目標としていただけあってすごく嬉しい！
