如何在输入/字段后显示错误消息

Question

我正试着在没有vuevalidate的情况下做个检查。我只需要在收到错误或false时在输入/字段下方显示此消息。

我试过使用: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';
},
...
}

Answer 1

我通常在Vuetify中通过添加rules参数(参见更多here)来完成此行为。

例如，如果您的输入值不允许超过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>