【VeeValidate】check boxのバリデーション

限定的な内容ですが VeeValidate (Nuxt3にて) で check box のバリデーションを実装しようとした際に少々詰まったので記録しておきます。
Filed コンポーネントの利用 (text)
通常 input の type=’text’ の場合以下のように VeeValidate の Filed コンポーネントを使用してバリデーションができる input を作成できます。
rules の設定については今回は割愛しますがそこに諸々バリデーションルールの追加が可能です。input 内容は v-model でバインディングできます。
<Field
type="text"
:name="name"
:id="id"
v-model="target"
:label="'テスト'"
:rules="{}"
/>
// --- 省略 ---
import { Field } from 'vee-validate';
checkbox の場合
しかし同様に type=’checkbox’ の際も boolean の 変数を v-model でバインディングすれば問題なくバリデーションできると思っていたのですがうまく動きませんでした。。
原因としては入力値の値がundifinedになっていることが原因らしく結論から行くと以下の様にチェック状態と、非チェック状態を明示的に指定する必要があった様です。
<Field
type="checkbox"
:name="name"
:id="id"
:value="true"
:unchecked-value="false"
v-model="target"
:label="'テスト'"
:rules="{}"
/>
:value がチェックされている時の値、:unchecked-value が非チェックの時の値という事でpropsを渡しています。
詳細は こちら に issue としてありましたが今回日本語の記事もなかったので備忘録として残しておきます。
ディスカッション
コメント一覧
まだ、コメントがありません