使用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-model引用不正确。您永远不会将其绑定到验证器。

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

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

https://vuelidate.js.org/#sub-basic-form查看组件的超文本标记语言