ReferenceError：即使包含vuelidate js脚本，也未定义$ v

2024-05-18 • 问答

我在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了，为什么原因我现在还不很清楚。

有什么想法吗？

您只是错过了包括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/

您需要添加验证器。

有关简单示例，请参见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。

ReferenceError：即使包含vuelidate js脚本，也未定义$ v

zl69301 回答：ReferenceError：即使包含vuelidate js脚本，也未定义$ v

大家都在问