Vuetify3.3以降のバリデーション

はじめに

Vuetifyのバリデーションが便利すぎるのですが、最終的なバリデーションチェックがうまく動かなかった。Vuetify3.3以降で結果が違うらしい。

バリデーションチェック

以下のようなテキストボックスで単純にrequiredで値の有無をチェック。送信ボタンクリック時にバリデーションチェックをする。
結果Vuetify3.3以降だと、text-fieldに値が入力されていてもエラーになってしまう。もちろん入力されてなくてもエラー。

<template>
  <v-form ref="formRef">
    <v-text-field v-model="name" :rules="[rules.required]" label="名前" />
    <v-btn @click="submit">送信</v-btn>
  </v-form>
</template>

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

const formRef = ref(null);
const name = ref('');

const rules = {
  required: (v) => !!v || '必須項目です',
};
const submit = () => {
  const result = formRef.value.validate();
  if (result.valid) {
    alert('バリデーション成功！');
  } else {
    alert('エラーがあります', result.errors);
  }
};
</script>

Vuetify3.3からvalidate()の戻り値が Promiseに

Vuetify3.3から、validate()の戻り値がPromiseになったのが原因

• Promiseとはなんぞや

Javascriptは処理を待てないので、Promiseの処理が終わるまで確定しない。

asyncとawaitを使う

submitの部分だけasyncとawaitで書き換えます。

const submit = async () => {
  const result = await formRef.value.validate();
  if (result.valid) {
    alert('バリデーション成功！');
  } else {
    alert('エラーがあります', result.errors);
  }
};

うまくいきました！