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

Question

我在 https://jsfiddle.net/rstoenescu/waugrryy/ 分叉了 jsfiddle，然后从我的一个工作项目中添加了以下行：

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

这是我的 jsfiddle：

https://jsfiddle.net/wsztud2h/

问题是现在我得到了 ReferenceError: $v is not defined，但我不是很清楚为什么。

有什么想法吗？

Answer 1

您需要添加验证器。

有关简单示例，请参阅 jsfiddle：

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

虽然可以推荐尝试 vee-validate。

Answer 2

您只是遗漏了最后一部分，包括 validators.min.js 并在数据部分声明了 form 变量。

<script src="https://unpkg.com/vuelidate@0.7.4/dist/validators.min.js"></script>

只需将此添加到 HTML 代码中。

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

工作代码笔 - https://jsfiddle.net/wmu2q8oc/1/

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

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

vue.js

vuelidate

quasar-framework