ReferenceError: $v is not defined even though vuelidate js scripts are being included

Question

I forked the jsfiddle at https://jsfiddle.net/rstoenescu/waugrryy/ and then added the following lines to it from a work project of mine:

<q-field class="q-mb-sm" helper="Your first name">
    <q-input v-model="form.first_name" inverted-light color="white" stack-label="First Name:" @blur="$v.form.first_name.$touch"
             :error="$v.form.first_name.$error" autofocus/>
</q-field>
<q-field class="q-mb-sm" helper="Your last name">
    <q-input v-model="form.last_name" inverted-light color="white" stack-label="Last Name:" @blur="$v.form.last_name.$touch"
             :error="$v.form.last_name.$error"/>
</q-field>

Here's my jsfiddle:

https://jsfiddle.net/wsztud2h/

The problem is that now I'm getting ReferenceError: $v is not defined and it's not immediately obvious to me as to why.

Any ideas?

Answer 1

You are just missing the last part including validators.min.js and declare the form variable in the data section.

<script src="https://unpkg.com/[email protected]/dist/validators.min.js"></script>

Just add this in the HTML code.

Vue.use(window.vuelidate.default);
const { required } = window.validators

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      form:{}
    }
  },
  validations: {
            form: {
                first_name: {required},
                last_name: {required}
            }
  },
  methods: {
    notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
    }
})

Working codepen - https://jsfiddle.net/wmu2q8oc/1/