0

我在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并没有立即明白为什么。

有任何想法吗？

4

2 回答 2

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/

于 2019-12-05T07:27:11.847 回答
0

您需要添加您的验证器。

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

于 2019-12-04T15:34:10.530 回答