Mam formularz w aplikacji vue. Pakiet vue2-persian-datepicker jest używany w perskim polu daty. Próbuję sprawdzić poprawność pól za pomocą vuelidate i moim problemem jest to, że komponent pdatepicker (pochodzący z pakietu vue2-persian-datepicker) nie uruchamia @blur i {{X5} } wydarzenia.

Próbuję zrobić coś takiego:

Szablon wewnętrzny:

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

Kod skryptu:

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

Błąd mówi, że undefined nie ma metody $dirty.

0
mehdi kamani 16 grudzień 2019, 22:42
A co to jest this.$v??
 – 
Daniyal Lukmanov
16 grudzień 2019, 22:45
Sprawdź dokumentację vuelidate tutaj @Daniyal
 – 
mehdi kamani
16 grudzień 2019, 23:13
))świetna odpowiedź. Mam na myśli log do konsoli co tam dostajesz.
 – 
Daniyal Lukmanov
16 grudzień 2019, 23:34
Zobacz odpowiedź poniżej. Nie wiąże prawidłowo walidatora z modelem v
 – 
Tim Wickstrom
17 grudzień 2019, 00:01

1 odpowiedź

Nigdy nie używałem tej biblioteki do walidacji, ale zgodnie z dokumentami nieprawidłowo odwołujesz się do modelu v. Nigdy nie wiążesz go z walidatorem.

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

Ponieważ deklarujesz walidacje, powinieneś być w stanie bezpiecznie usunąć wymagany atrybut z pdatepicker, chyba że ten składnik wymaga tej właściwości.

Zobacz dokumenty w podstawowym formularzu dokumentów tutaj: https://vuelidate.js.org/#sub- basic-form spójrz na kod HTML komponentu,

0
Tim Wickstrom 16 grudzień 2019, 23:36