Vuetify表单验证报错：规则应返回字符串/布尔值却收到对象

这个问题的核心原因是你把验证规则放在了data选项里，Vue的响应式系统会自动对data中的所有属性做响应式处理——包括你定义的规则函数。当Vue把规则函数包装成Proxy对象后，Vuetify在调用验证规则时，拿到的就不再是一个纯函数，而是一个object类型的Proxy，自然就会抛出这个类型错误。

为什么用data: () => ({})时没报错？这其实是个偶然情况：箭头函数形式的data不会绑定Vue实例作为this，Vue的响应式处理在这种场景下可能没有对函数类型的属性进行完整包装，但这并不是一种可靠的写法，不能依赖它。

解决方法：把验证规则移出data #

验证规则是静态逻辑，不需要响应式，你可以把它放到computed选项里，或者直接作为组件的顶层属性定义：

方案1：使用computed

把regla_buscar从data中移除，添加到computed里：

export default {
  data() {
    return {
      // ... 你的其他数据（去掉regla_buscar）
      form_valid: true,
      drawer: null,
      model: ['Vuetify'],
      search: null,
      // ... 其余数据项
    }
  },
  computed: {
    regla_buscar() {
      return [
        v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa mínimo 3 caracteres'
      ]
    }
  },
  // ... 其他选项（fetch、methods等）
}

方案2：直接作为组件顶层属性

如果你的规则不需要依赖组件实例的任何数据，也可以直接在组件选项里定义：

export default {
  regla_buscar: [
    v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa mínimo 3 caracteres'
  ],
  data() {
    return {
      // ... 你的其他数据
    }
  },
  // ... 其他选项
}

额外小提示 #

你的错误提示文字里有拼写错误：minino应该是mínimo，carateres应该是caracteres，修正后用户体验会更好哦~

内容的提问来源于stack exchange，提问作者Andres Miguel Campos