v-formのバリデーション validate()の返り値に注意

Vuetifyのvalidate()の返り値は…

　Vuetifyのv-formには入力値に対してバリデーションを行ってくれるvalidate()があります。
大変便利で現在作成中の個人開発アプリケーションでも使用しているのですが、返り値を勘違いしているせいでなかなかの時間、ハマってしまいました。
どこかの誰かの解決になる可能性もあると思い、ここに残しておきます。

環境

• Vue：3.2.47
• Vuetify3.1.4

validate()の返り値はvalid!

下記の公式を見れば一発なのですが、validate()はbolleanの型を持つvalidオブジェクトを返却します。
v-form API
要するに入力に問題が無ければtrue、そうでなければfalseを返してくれます。
私が今回ミスっていたのは 判定条件をvalidで指定していなかった 点です。下記コードを見てもらえれば一目瞭然…

ダメコード

NG例

<template>
  <v-form ref="hoge_valid">
    <v-text-field v-model="hoge_name" :rules="[requiredHogeName]" label="名前"></v-text-field>
  </v-form>
  
  <v-btn class="register-btn" outlined @click="submit">
    登録
  </v-btn>
</template>

<script setup>
import { ref } from 'vue';

/** 入力フォームバリデーション用定数 */
const hoge_valid = ref(false);
/** 名前フォーム入力値 */
const hoge_name = ref();

// 名前フォーム入力バリデーション
const requiredHogeName = (value) => {
  if (value) {
    return true;
  }
  return '名前を入力してください。';
}

// バリデーション通過時のアクション
const submit = async () => {
  // フォームのバリデーション通過確認
  const validResult = await hoge_valid.value.validate();
  // 条件分岐で処理を書く
  if (validResult.hoge_valid) {
    alert('バリデーション通過');
  } else {
    alert('エラー');
  }
</script>

コードの説明

• v-text-fieldの:rulesで入力必須のバリデーションを設定しています。入力値があればtrue、なければfalseが定数hoge_validに設定されます。
• 次に登録ボタンを押下した時にsubmitが発火して、メソッド内のvalidResultにhoge_validのバリデーション結果が入ります。(重要なのは上述したように validate()の返り値はvalidオブジェクトです)
• if文の条件はバリデーション通過の結果になっていますが…実際はこれでは常にelseへ分岐していってしまいます。

どうすれば良かったのか？

submit内で設定した定数validResultにはhoge_validというオブジェクトは存在していません。繰り返しになってしまいますが、保持しているオブジェクトは valid になります。そのため…

変更後

<script setup>
// バリデーション通過時のアクション
const submit = async () => {
// フォームのバリデーション通過確認
const validResult = await hoge_valid.value.validate();
// 条件分岐で処理を書く
if (validResult.valid) {
alert('バリデーション通過');
} else {
alert('エラー');
}
</script>

このように、if (validResult.valid)としてあげれば、バリデーション結果で条件分岐が可能になります。

終わりに

　しっかりと公式のvalidate()の項目を読んでおけばもっと早く解決できたと思います…
やっぱり公式ドキュメントがNo.1！