Vuelidate неправильно проверяет данные формы - PullRequest
Новая
       25

Vuelidate неправильно проверяет данные формы

1 голос
/ 25 марта 2019

У меня есть компонент Vue, который содержит форму с установленным плагином проверки формы Vuelidate, и я хочу сделать вызов API с Axios, чтобы проверить, не занято ли уже имя пользователя в базе данных. Пока еще нет функциональных возможностей для отображения чего-либо, если имя пользователя действительно занято, но объект Vuelidate $v должен по-прежнему реагировать и обновлять свою username опору в соответствии с моим вызовом API Axios.

Join.vue 

<template>
<form id="join">
<input
          name="username"
          placeholder="Username"
          v-model.lazy="username"
          @blur="$v.username.$touch()"
          type="text"
          autocomplete="off"
        />
... (submit button and other irrelevant stuff) ...
</form>
</template>
<script>
import { required } from 'vuelidate/lib/validators'
import Api from '@/services/Api'
export default {
  data() {
    return {
      username: ''
    }
  },
  validations: {
    username: {
      required,
      isUnique(username) {
        if (username === '') return true

        return Api()
          .get('/validate', {
            params: { field: 'username', value: username }
          })
          .then(res => {
            console.log(res.data)
            return res.data.status
          })
          .catch(error => {
            console.error(error)
          })
      }
    }
  }
}
</script>

Вызов Axios получает правильный ответ JSON от API, который отображается в Chrome DevTools (статус 200 OK):

/ validate? Field = username & value = Test (имя пользователя доступно) 

{"status":true}

/ validate? Field = username & value = Admin (имя пользователя занято) 

{"status":false}

Ожидаемый результат и проблема:

isUnique() должен выполнить вызов API и после получения ответа вернуть значение либо true, либо false в зависимости от того, занято имя пользователя или нет (res.data.status). Затем свойства $ v должны соответственно измениться для проверки формы.

Ответ правильно регистрируется в консоли Javascript. Однако $ v.username ВСЕГДА недопустимо ($ v.username. $ Invalid: true), даже когда консоль регистрирует { status: true }.

Кроме того, похоже, что обещание Axios .then не разрешается должным образом или Vuelidate не получает разрешенное значение, поскольку $pending по-прежнему имеет значение true после проверки поля ввода и регистрации ответа .

Перед изменением значения поля ввода для параметра $ pending устанавливается значение false.

Нет ошибок в консоли или при создании моего приложения Vue. Как я могу заставить Vuelidate ждать ответа и затем заставить isUnique() вернуть правильный логический параметр?

1 Ответ

1 голос
/ 04 апреля 2019

Мне удалось решить эту проблему, добавив async к методу isUnique().

...