Пользовательский компонент проверки валидатора aync vue-validator

Question

Я пытаюсь выполнить асинхронную проверку для одного из моих компонентов Vue.js, используя vue-validator, следуя this example. Я хотел бы проверить, уже отправлено ли электронное письмо от пользователя.

Это реализация валидатор я в настоящее время борется с:

Vue.validator('emailUnique', { 
    message: 'this e-mail address has already been taken', 
    check: function (val) { 
     return Vue.http({ 
      url: '/validate/email-unique', 
      method: 'POST', 
      data: { 
       email: val 
      } 
     }).then(
      function (response) { // success 
       console.log('success'); 
       return Promise.resolve(); 
      }, 
      function (response) { // error 
       console.log('error'); 
       return Promise.reject(); 
      } 
     ).catch(function(error) { 
      console.log('catch'); 
      return Promise.reject(); 
     }); 
    } 
}); 

, который я использую в моем компоненте, как так:

<div> 
<validator name="userValidator"> 
    <form novalidate class="form-group" v-on:submit.prevent="submitUser"> 
    <div class="form-group"> 
     <label for="email">E-Mail</label> 
     <input id="email" name="email" type="email" class="form-control" 
       placeholder="jon@greatesthits.com" 
       v-model="user.email" required v-validate:email="{ required: true, email: true, emailUnique: true }"> 
     <div class="form-validation-error" v-if="$userValidator.email.required && $userValidator.email.touched"> 
      <span>this field is required</span> 
     </div> 
     <div class="form-validation-error" v-if="$userValidator.email.email && $userValidator.email.touched"> 
      <span>not a valid e-mail address</span> 
     </div> 
     <div class="form-validation-error" v-if="$userValidator.email.emailUnique && $userValidator.email.touched"> 
      <span>this e-mail address has already been taken</span> 
     </div> 
    </div> 
    </form> 
</validator> 
</div> 

К сожалению, это нарушает весь объект проверки для электронной почты:

[Vue warn]: Error when evaluating expression "$userValidator.email.required && $userValidator.email.touched". 
TypeError: scope.$userValidator.email is undefined 

Если я не зарегистрировать emailUnique валидатор, другие два правила проверки работают нормально. Кроме того, запрос /validate/email-unique отправлен правильно и получает ожидаемое возвращаемое значение (только ответ json_encoded с true/false), и я вижу соответствующий вывод console.log() ('success', 'error', 'catch'), поэтому я предполагаю, что возвращаемое значение для функции проверки isn ' t правильно и вызывает ошибку vue-validator.

Vue.http действительно возвращает Promise, поэтому, согласно документам и приведенному выше примеру, это должно быть хорошо. Я также пытался вернуть true или false внутри пункта .then(), но Vue.http еще возвращает Promise (который, видимо, беспокоит vue-validator - может быть, Promise объект Я возвращаюсь не в форме vue-validator ожидает).

Любые подсказки по этому вопросу?

Answer 1

Сохраняется ли эта проблема, если вы измените vue.config.debug на false? Существует проблема, когда Vue пытается оценить scope.$userValidator.email.required ПЕРЕД vue-validator фактически создает эту переменную. Это указывает только на ошибку во время режима отладки и работает иначе. Переменная EVENTUALLY будет существовать и работать, просто не в момент ее первоначальной оценки. Это проблема с жизненным циклом директивы, которая потребует некоторых настроек для ядра.

Смотрите здесь: https://github.com/vuejs/vue-validator/issues/99

Я не считаю, что этот вопрос был решен, что я знаю. Вы можете попробовать обновить Vue и vue-validator до последних версий, если вы еще этого не сделали. Я знаю @kazupon, создатель vue-validator имеет вклад в vue 1.0.19, что относится к этому, хотя и не уверен, если это было исправлено: https://github.com/vuejs/vue/releases/tag/v1.0.19

редактировать: это фиксируется в новых версиях. vue 1.0.19 добавлена ​​поддержка терминальных директив. Из документов:

Vue компилирует шаблоны путем рекурсивной ходьбы по дереву DOM. Однако, когда он сталкивается с терминальной директивой, он перестанет ходить с дочерними элементами этого элемента.

Короче говоря, Vue больше не будет пытаться скомпилировать элементы внутри валидатора и оставить его в плагине. Убедитесь, что у вас есть валидатор 2.0.0, который был выпущен всего через пару дней после обновления ядра vue: https://github.com/vuejs/vue-validator/releases/tag/v2.0.0