CODEWITHSUNDEEP
vue.jsquasar-frameworkvuelidate
neubert
neubert

Reputation: 16812

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

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?

Upvotes: 0

Views: 3037

Answers (2)

Pratik Patel
Pratik Patel

Reputation: 6978

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/

Upvotes: 3

Bebolicious
Bebolicious

Reputation: 116

You need to add your validators.

See jsfiddle for a simple example:

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

new Vue({
    el: "#app",
  data: {
    text: ''
  },
  validations: {
    text: {
        required,
      minLength: minLength(5)
    }
  },
  methods: {
    status(validation) {
        return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
})

Can recommend trying out vee-validate though.

Upvotes: 0

Related Questions