Reputation: 546
I'm trying to do a check without vuevalidate. I just need to show this message below the input/field when I get an error or false.
I tried using :error-messages
. But it returns me an error
Error: check failed for prop "errorMessages". Expected String, Array, got Function
Code
<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';
},
...
}
Upvotes: 1
Views: 1353
Reputation: 81
I usually accomplish this behaviour in Vuetify by adding the rules
parameter (see more here).
So, as an example, if your input value is not allowed to exceed 20 characters and only letters are allowed, you could write the following code:
<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>
Upvotes: 1