Использование Vuelidate с Nuxt - продолжайте видеть ошибку, даже когда условие выполнено - PullRequest
Новая
       58

Использование Vuelidate с Nuxt - продолжайте видеть ошибку, даже когда условие выполнено

0 голосов
/ 31 марта 2020

Я пытаюсь использовать Vuelidate с моим проектом Nuxt. Поэтому я установил пакет Vuelidate, затем в папке plugins создал vuelidate.js: 

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

и определил его в nuxt.config.js 

plugins: [
  {src: '~/plugins/directives.js'},
  {src: '~/plugins/vuelidate.js', mode: 'client'}
],

Кстати, попробовал без mode, с массивом только строк - тот же результат.

Теперь в моем компоненте есть следующее (Vuetify) текстовое поле: 

<v-text-field
  id='firstName'
  v-model='formData.firstName'
  label='First Name'
  name='firstName'
  prepend-icon='person'
  type='text'
  :error-messages='firstNameErrors'
  @blur='$v.formData.firstName.$touch'
  @input='$v.formData.firstName.$touch'
/>

Мой импорт: 

import { validationMixin } from 'vuelidate'
import {
  required,
  minLength,
} from 'vuelidate/lib/validators'

И остальная часть моего кода: 

export default {
    name: 'AuthForm',
    mixins: [validationMixin],
    validations: {
      formData: {
        firstName: {
          /*required: requiredIf(function() {
            return !this.isLogin
          }),*/
          minLength: minLength(2)
        },
    },
    props: {
      formData: {
        type: Object,
        required: true,
        default: () => {}
      }
    },
    computed: {
      firstNameErrors() {
        const errors = []

        if (!this.$v.formData.firstName.$dirty) {
          return errors
        }

        !this.$v.formData.firstName.minLength && errors.push('First name must be at least 2 characters long')

        // !this.$v.formData.firstName.required && errors.push('First name is required')
        return errors
      }
    }
  }

Поэтому я пытаюсь проверить, что firstName имеет как минимум 2 символа. Я вижу сообщение об ошибке, как только начинаю печатать, но при 2 и более символах ошибки все еще существуют.

Я попытался сохранить лог this.$v.formData в свойстве computed, но оно печатается после загрузки компонента и как только я начну печатать. Если я проверяю зарегистрированный объект, я вижу, что this.$v.formData.firstName.$model имеет более 2 символов, но я также все еще вижу ошибку, независимо от того, что я пытался сделать (например, вызов $reset перед повторным вызовом $touch при вводе , имея firstNameErrors в качестве метода вместо computed et c ...)

Точно такой же код работал для меня в моих Vue проектах, но в этот раз я впервые работаю с Nuxt и я Я не уверен, почему этот код перестал работать. Чего мне не хватает?

...