如何在输入框下方展示错误提示并解决errorMessages prop类型报错

报错原因 #

error-messages属性要求传入字符串/数组类型的参数，你当前直接把messageErrors函数本身绑定给了该属性，传入值为Function类型，触发了Vuetify内置的prop类型校验报错。另外你的代码还存在methos拼写错误（正确应为methods），会导致方法无法正常调用。

修正方案 #

不需要用方法返回错误文本，直接把错误提示定义为响应式data属性，校验时动态赋值即可：

• 将messageErrors从methods移到data中，初始值设为空字符串（单条错误）或空数组（多条错误）
• 失焦校验时，校验不通过直接给messageErrors赋值错误内容，校验通过则清空值

完整修正代码 #

模板部分 #

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

逻辑部分 #

export default {
  data() {
    return {
      timeStart: '',
      // 定义为响应式数据，单条错误用字符串，多条错误用空数组初始化
      messageErrors: '',
      rules_time: [] // 保留你原有自定义规则即可
    }
  },
  methods: {
    verificarHora(element){
      // 每次校验前先清空历史错误
      this.messageErrors = ''
      if(!element.target.value.match(/^[0-9]+$/)){
        // 校验不通过直接赋值错误提示
        this.messageErrors = 'erro'
      }
    }
  }
}

多条错误提示拓展 #

如果需要同时展示多个错误，修改为数组类型即可：

// data初始化
messageErrors: []

// 校验逻辑
verificarHora(element){
  this.messageErrors = []
  const value = element.target.value
  if(!value.match(/^[0-9]+$/)){
    this.messageErrors.push('只能输入数字')
  }
  if(value.length < 5){
    this.messageErrors.push('长度不能小于5位')
  }
}

内容的提问来源于stack exchange，提问作者Bjorn Ruiz