🔥

vee-validateのバリテーションエラーをリアルタイムに表示する

2025/02/23に公開

vee-validate v4を使用している際に、Enterキーを押したりカーソルの選択を外さないと
バリテーションエラーが表示されなかったり、入力しても古いバリテーションエラーが
表示された時の対処法を書きます

ここで記載のない部分のコードがどのようになっているのかを知りたい場合は、
こちらの記事を見てください
https://zenn.dev/sayasurvey/articles/4269b418e6516f

対処法はTextfieldなどのコンポーネントで下記の記載を追加するだけです

<script setup lang="ts">
import { configure } from 'vee-validate';

configure({
  validateOnInput: true,
})
</script>

Discussion