Using Vuelidate with Nuxt - keep seeing error even when the condition is met

Viewed 7257

I'm trying to use Vuelidate with my Nuxt project. So I installed the Vuelidate package, then in the plugins folder created vuelidate.js:

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

And defined it in nuxt.config.js

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

BTW, tried it without mode, with just strings array - same result.

Now in my component I have the following (Vuetify) text field:

<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'
/>

My imports:

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

And the rest of my code:

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
      }
    }
  }

So I'm trying to validate that firstName has at least 2 chars. I do see the error message once I start typing, but at 2 and more characters the errors still exist.

I tried to console log this.$v.formData in the computed property, but it gets printed once the component is loaded and once I start typing. If I inspect the logged object, I do see that this.$v.formData.firstName.$model has more than 2 chars, but I also still see the error, no matter what I tried to do (for example calling $reset before calling $touch again on input, having firstNameErrors as method instead of computed etc...)

The exact same code worked for me in my Vue projects, but this first time I'm working with Nuxt and I'm not sure why this code stopped working. What am I missing?

0 Answers
Related