Метод проверки формы () не работает с Vue 3 и Vuetify 3

В Vuetify 3 метод validate возвращает обещание, которое можно разрешить либо с помощью await, либо с помощью цепочки ответов с помощью .then(). Пример в документации также демонстрирует, что см. здесь.

Таким образом, одним из подходов к этой проблеме может быть использование переменной ref в форме и при отправке, просто вызовите метод validate() и свяжите его ответ, чтобы извлечь параметр valid, который сообщает статус проверки.

Я использовал скрипт setup в демо. Вот возможное решение-

<template>
  <v-form ref = "myForm">
    <v-container>
      <v-row>
        <v-col cols = "12" md = "4">
          <v-text-field
            v-model = "firstname"
            :rules = "nameRules"
            :counter = "10"
            label = "First name"
            required
          ></v-text-field>
        </v-col>
      </v-row>
      <v-btn type = "submit" color = "primary" @click = "submitForm">Submit</v-btn>
    </v-container>
  </v-form>
</template>

<script setup lang = "ts">
  import { ref } from 'vue'
  const myForm = ref();
  const firstname = ref(null);
  const nameRules = [
    value => {
      if (value) return true
      return 'Name is required.'
    },
    value => {
      if (value?.length <= 10) return true
      return 'Name must be less than 10 characters.'
    },
  ]
  const submitForm = () => {
    myForm.value?.validate().then(({valid: isValid}) => {
      console.info(isValid);
    })
  }
</script>

Вот рабочая демонстрация.

Надеюсь это поможет.

Хм, я почти уверен, что ваше решение не сработает в первый раз, так как обработчик @click на кнопке отправки будет запущен до того, как событие отправки будет запущено в VForm или может завершиться любая другая глобальная проверка. Итак, это означает, что при первом нажатии, когда вы делаете:

if ((this.$refs.myForm as any & { validate: () => boolean }).validate() && this.valid) {
  ...
}

• this.$refs.myForm.validate() всегда будет истинным, так как validate() возвращает обещание, а Boolean(new Promise()) истинно
• this.valid будет обновляться через v-model после завершения validate() или когда проверка каждого ввода будет запущена вручную (это как это реализовано)

При последующих кликах validate() будет запускаться хотя бы один раз, поэтому :modelValue будет отражать текущий статус проверки. Так что в этот момент это работает.

Использование nextTick, как вы предлагаете, заставит выполнение ждать, но для более или менее несвязанного события. Ожидание обещания от validation() является более прямым и надежным подходом и имеет больше смысла семантически, поэтому я бы предложил использовать его.

Поэтому я думаю, что лучшим решением является то, что предлагает Vuetify, где вы ожидаете обещания, переданного обработчику @submit (который также более надежен, чем использование @click на кнопке отправки, поскольку он также охватывает программные отправки):

async function submit(submitEventPromise: SubmitEventPromise) {
  const {valid, errors} = await submitEventPromise
  if (valid) {
    ...

(SubmitEventPromise — тип машинописного текста, он экспортируется Vuetify)