Валидация полей input Vuejs?

Question

[Маленький Вася]

Помогите разобраться, вобщем реализовал вот такую штуку: Есть компонет "AppInput" нужно было реализовать валидация по ней через входные параметры

AppInput.vue

<input
      class="field"
      :class="value ? 'has-data' : ''"
      :type="type"
      :required="reqired"
      v-model="input"
      @change="validate"
    >

в пропс rules передается массив функции

methods: {
    validate (e) {
      if (this.rules) {
        this.message = this.rules.map(fn => fn(this.input))
      }
    }
  }

rules: [
       v => !! v || 'Поле обязательное',
       v => v.length >= 8 || '8 символов'
   ]

В приницпе это работает, но нужно сделать сделать след. при первом же не валидности полей отображать сообщение, а у меня отображаются все разом

Если в кратце нужно сделать инпут как у Vuetify

Answer 1

[0xD34F]

this.message = this.rules.map(n => n(this.input)).find(n => n !== true);

Comments

[Маленький Вася]

Спасибо

Answer 2

[Александр Дроздов]

1) Вот их реализация https://github.com/vuetifyjs/vuetify/blob/master/p...
2) Можно поискать готовые решения не пилить очередной велосипед
3) Ретурнить первое же сообщение если там false, и дальше не перебирать валидаторы