vee-validateを使っていてハマったこと

requiredのとき、値がfalseでもvalidateの結果が、trueになってしまう。

事象：お問い合わせフォームの「チェックボックス」

input(
    type="checkbox",
    data-vv-name="bool",
    v-validate="'required'",    
)

validator.validate('bool', true).then((result) => {
    console.log(result)
});
--> true

validator.validate('bool', false).then((result) => {
    console.log(result)
});
--> true

値がtrueでもfalseでもバリデーションが通ってしまう。

チェックボックスの正しい動作として、チェックがついていなければ、エラーになって欲しい。
でも、このままだとエラーにはならない。

調べました。
「vee-validate boolean」

解決したIssuesが出てきましたよ。
https://github.com/baianat/vee-validate/issues/484

あれ？修正してくれてますやん！
なんで動かないの？バージョンも最新にしたのに。。。

ソース見に行くか・・・
requiredルールのソース

required.js

  // incase a field considers `false` as an empty value like checkboxes.
  if (value === false && invalidateFalse) {
    return false;
  }

ちゃんと用意してくれていました。
どうやらinvalidateFalseの指定をしてあげればいいのですね^^

正しいチェックボックスの例

input(
    type="checkbox",
    data-vv-name="bool",
    v-validate="'required:invalidateFalse'",  // <-- ここ 
)

はい！正しく動いてくれました！

vee-validateのドキュメントはたまに古いことがあるので、あれ？ってなったらソース見に行くのがいいですね。
とても見やすいソースになっているので、すぐに原因を見つけることができると想いますよ。