Issue with vuelidate state not updating

[Ylec]

Hello, I have issue with vuelidate (0.7.4) integration with last version of Quasar.

I added vuelidate in boot folder.

My component :

<template>
  <q-page class="flex flex-center">
    <div class="q-pa-md" style="max-width: 400px">

      <q-card class="q-pa-md">
        <q-form
          @submit="onSubmit"
          class="q-gutter-md"
        >

          {{$v.form.username}}
          <p v-if="error" class="q-pa-sm text-white rounded-borders bg-negative">{{ error }}</p>
          <q-input
            filled
            v-model.trim.lazy="form.username"
            :disabled="loading"
            label="Your login *"
            hint="Nom d'utilisateur ou adresse e-mail"
            :error="!this.$v.form.username.$error"
            error-message="Required"
          >
            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>
          </q-input>


          <q-input
            filled
            type="password"
            :disabled="loading"
            v-model.trim="form.password"
            label="Votre mot de passe *"
            :error="!this.$v.form.password.$error"
            error-message="Required"
          >
            <template v-slot:prepend>
              <q-icon name="vpn_key"/>
            </template>
          </q-input>

          <div>
            <q-btn type="submit" color="primary" :disabled="this.loading">
              <q-spinner v-if="this.loading"></q-spinner>
              Log in
            </q-btn>
          </div>
        </q-form>
      </q-card>

    </div>
  </q-page>
</template>

<script>
  import {required} from 'vuelidate/lib/validators'

  export default {
    name: 'Login',
    data: function () {
      return {
        form: {
          username: '',
          password: ''
        },
        loading: false,
        error: ''
      }
    },
    validations: {
      form: {
        username: {required},
        password: {required}
      }
    },

    methods: {
      async onSubmit() {
       ....
      }
    }
  }
</script>

<style>
</style>

My issue is that all value from $v state are not update.
model, $invalid and required are updated, but $error and $dirty are always false.

Here is $v value when login field is empty :

{ 
"required": false, 
"$model": "",
"$invalid": true, 
"$dirty": false, 
"$anyDirty": false, 
"$error": false, 
"$anyError": false, 
"$pending": false, 
"$params": { "required": { "type": "required" } }
}

Does anybody knows what is happening here ?
Thanks.

[metalsadman]

Call this.$v.form.$touch() before submit. Or you can call it in one of the events on your inputs. You should refer to vuelidate docs too, they have many examples there.

[Ylec]

Thanks, it works that way, but in the vuelidate doc, about the $dirty property, it’s written that it is set automatically when writing to $model value.
In my case, it’s not set automatically.

[metalsadman]

if so, then you should use the vuelidade model in your v-models, ie. <q-input v-model="$v.form.username.$model" ..,. one thing, you can’t call this in the template so in your :error prop it should be like :error="$v.form.password.$error".

[Ylec]

Damn, I feel dumb to not have read the documentation properly, and creating a post not related to Quasar at all…
Thanks.

[metalsadman]

Well, it’s easy to miss stuff from the docs, but would be easier to review it over and over when you stumble upon an issue before hunting for answers outside of the official docs :), and there’s always google which most of the time faster than waiting for someone to reply.