Ви проверять сообщение в расширении asyn c правило не отображает сообщение об ошибке

Question

Я использую vee validate с vuetify, и мне нужно проверить, является ли электронная почта уникальной. Таким образом, в моем vuejs я добавил

mounted(){

       extend('unique-email', (value) => {
         return this.$axios.post('/api/auth/unique-email', { email: value })
         .then((res) => {
          return {
            valid: true,
          };
        }, (err) => {
          return {
            valid: false,
            data: { message: 'Email already registered' }
          };
        })
        }, {
         immediate: false
       })
   }

В моем vuetify я добавил

<v-textfield v-model="form.email" rules="required|email|unique-emai">

Выше работает для всех правил, но не разрешает сообщение email already registred из правило уникальной электронной почты. Что мне нужно добавить, чтобы при сбое проверки asyn c отображалось сообщение с ошибочной части.

В настоящее время сообщение email is not valid отображается только при сбое средства проверки уникального адреса электронной почты. Чего мне не хватает?

Answer 1

Кажется, вы забыли собрать информацию об ошибках, например:

extend('unique-email', (value) => {
  return this.$axios.post('/api/auth/unique-email', { email: value })
    .then((res) => {
      return {
        valid: true,
      };
    }, (err) => {
      return {
        valid: false,
        data: { message: 'Email already registered' }
      };
    })
  }, 
  getMessage: (field, params, data) => data.message
)

btw, по умолчанию «немедленное: ложное», вам не нужно явно определять ее.

Answer 2

Если вы посмотрите на документы , кажется, что вам нужно вручную обрабатывать ошибки, вызванные вашим вызовом POST, поэтому вместо простого возврата объекта в ваш обработчик ошибок вы должны сделать следующее:

   extend('unique-email', (value) => {
     return this.$axios.post('/api/auth/unique-email', { email: value })
     .then((res) => {
      return {
        valid: true,
      };
    }, (err) => {
      this.$refs.myValidationObserver.setErrors({
         email: ['Email already registered']
      });
    })
    }, {
     immediate: false
   })

Это требует двух изменений за пределами расширения:

1. добавить атрибут vid="message" к вашему ValidationProvider (VP) вокруг вашего v-textfield
2. добавить атрибут ref="myValidationObserver" вашему ValidationObserver, который упаковывает VP в точку # 1.

Или, может быть, я что-то упустил! Откуда у вас появилась идея вернуть предмет, который у вас был в вопросе? Я не вижу ничего подобного в текущих документах ...

      return {
        valid: false,
        data: { message: 'Email already registered' }
      };