Vuetify结合Vuelidate：复用错误处理函数时如何获取对应字段

当然可以实现！你只需要把错误消息处理函数改成接收字段名作为参数的形式，就能在模板里为每个输入框指定对应的字段标识，动态处理不同字段的错误验证，完美复用同一个函数。

步骤1：修改错误消息处理函数 #

把原来的无参函数改成带fieldName参数的版本，通过字段名动态访问Vuelidate的验证对象：

// 错误消息处理函数（带字段名参数）
dataValorErrors(fieldName) {
  const errors = [];
  // 动态获取对应字段的Vuelidate验证实例
  const targetField = this.$v.preco_proced[fieldName];

  if (!targetField.$dirty) return errors;
  // 针对该字段的required规则做错误提示
  if (!targetField.required) {
    errors.push("Data é obrigatório");
  }
  
  return errors;
},

步骤2：在模板中传入对应字段名 #

给每个v-text-field的:error-messages属性传入对应的字段名，调用复用的错误函数：

<v-text-field 
  class="purple-input" 
  label="Data" 
  type="date" 
  v-model="preco_proced.data_valor1" 
  :error-messages="dataValorErrors('data_valor1')" 
  persistent-hint 
  required 
></v-text-field>

<v-text-field 
  class="purple-input" 
  label="Data" 
  type="date" 
  v-model="preco_proced.data_valor2" 
  :error-messages="dataValorErrors('data_valor2')" 
  persistent-hint 
  required 
></v-text-field>

注意事项 #

别忘了确保你的Vuelidate验证规则已经为每个目标字段配置了required规则，比如：

import { required } from 'vuelidate/lib/validators';

export default {
  // ...其他选项
  validations: {
    preco_proced: {
      data_valor1: { required },
      data_valor2: { required }
    }
  }
}

这样一来，不管你有多少个日期输入框，都只需要这一个错误处理函数，通过传入不同的字段名就能精准处理每个字段的错误提示啦。

内容的提问来源于stack exchange，提问作者Luiz Alves