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

Question

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?

Does it work if you do `v-model='$v.formData.firstName.$model'`? — David Weldon, Mar 31 '20 at 19:42
Well your nuxt setup is the same as mine, so we can remove that from the list. Other things that could be an issue: you are taking `formData` as a prop, your model is nested, you're using it with `Vuetify`. I'd recommend debugging this by creating a simple form with non-nested component data and an ``. If that works, try adding things back in until it breaks. I get that's a lot of work, but you have a lot of moving pieces here. — David Weldon, Mar 31 '20 at 20:04
@DavidWeldon Well, I'll try to do that. Will report tomorrow how it goes... Thanks! — Igal, Mar 31 '20 at 20:21
@DavidWeldon Well, apparently I passed the `formData` incorrectly. Once fixed - everything worked just fine! Thanks! That thing drove me crazy here... — Igal, Apr 01 '20 at 07:24
@Igal would help others if you could publish what the fix was in your case — D1ZZYD 23, Mar 26 '21 at 10:29

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

0 Answers0