javascript - 使用 vuelidate 进行验证

Question

我在 vue 应用程序中有一个表单。 vue2-persian-datepicker 包用于波斯日期字段。我正在尝试使用 vuelidate 验证字段，我的问题是 pdatepicker 组件(来自 vue2-persian-datepicker 包)确实不触发 @blur 和 @input 事件。

我正在尝试做这样的事情:

内部模板:

<pdatepicker
   v-model="date" 
   required 
   :error-messages="dateErrors"
></pdatepicker>

脚本代码:

import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue';

import { required } from 'vuelidate/lib/validators'

export default {
  components: {
     VueTimepicker,
  },

  validations: {
    date: {
      required
    },
  }, 

  data() {
    return {
      date: '',
    }
  },

  computed: {
    dateErrors() {
      const errors = []
      if (!this.$v.date.$dirty) return errors
      !this.$v.date.required && errors.push('date is required.');
      return 
    }
  },

错误说undefined没有$dirty方法。

Answer 1

我从未使用过这个库进行验证，但根据文档，您错误地引用了您的 v 模型。您永远不会将其绑定(bind)到验证器。

<pdatepicker
   v-model="$v.date.$model"
   required 
   :error-messages="dateErrors"
></pdatepicker>

此外，由于您声明了验证，因此您应该能够安全地从 pdatepicker 中删除所需的属性，除非该组件需要该属性。

请参阅此处的基本表单文档:https://vuelidate.js.org/#sub-basic-form查看组件的 HTML，