Блог

Я пытаюсь провести проверку без vuevalidate. Мне просто нужно показать это сообщение под полем ввода/, когда я получаю ошибку или ложь.

Я пробовал использовать :error-messages . Но это возвращает мне ошибку

Ошибка: check failed for prop "errorMessages". Expected String, Array, got Function

Код

 <v-text-field
   class="ma-0 pa-0"
   v-model="timeStart"
   :counter="5"
   :rules="rules_time"
   label="Hora de início"
   @blur="verificarHora"
   :error-messages="messageErrors"
></v-text-field>

...
methos: {
...
verificarHora(element){
      if(!element.target.value.match(/^[0-9] $/)){
        this.messageErrors()
      }
},
messageErrors(){
      return 'erro';
},
...
}
 

Обычно я выполняю такое поведение в Vuetify, добавляя rules параметр (подробнее см. Здесь).

Итак, в качестве примера, если ваше входное значение не может превышать 20 символов и допускаются только буквы, вы можете написать следующий код:

 <template>
  <v-text-field
    counter="20"
    :rules="myRules"
  />
</template>

<script>
export default {
  ...
  data: () => ({
    myRules: [
      input => input.length <= 20 || "Input exceeds 20 characters.",
      input => /^[A-Za-zäÄöÖüÜß]*$/.test(input) || "Only letters are allowed."
    ]
  })
  ...
}
</script>