Vuetify v-text-field多规则验证报错：规则应返回字符串或布尔值却收到对象

这个报错[Vuetify] Rules should return a string or boolean, received 'object' instead的根源很明确：你给v-text-field的:rules属性传入了二维数组，而Vuetify要求rules必须是一维的验证函数数组。

问题分析 #

看你的视图代码：

<v-text-field 
  v-if="loggedUser.role_id == 1" 
  v-model="editedItem.commission" 
  label="Commission (%) *" 
  required 
  :rules="[rules.select, rules.numberRules]"
>
</v-text-field>

这里rules.select和rules.numberRules本身都是数组（比如rules.select是[(v) => !!v || "Item is required"]，rules.numberRules是包含两个函数的数组），你把它们直接放进另一个数组里，最终得到的是[[函数1], [函数2, 函数3]]这种二维结构。Vuetify遍历规则时，拿到的每个元素是数组（属于对象类型），自然会报错说收到了object。

解决方案 #

你需要把两个规则数组合并成一个一维数组，可以用ES6的展开运算符...来实现：

<v-text-field 
  v-if="loggedUser.role_id == 1" 
  v-model="editedItem.commission" 
  label="Commission (%) *" 
  required 
  :rules="[...rules.select, ...rules.numberRules]"
>
</v-text-field>

这样展开后，rules就变成了[函数1, 函数2, 函数3]的一维结构，每个元素都是符合要求的验证函数，既会执行必填项校验，也会执行正数校验。

验证逻辑说明 #

合并后的规则会按顺序执行：

• 先检查输入是否为空，为空则返回"Item is required"
• 再检查输入是否为数字，不符合则返回"You have to enter a number"
• 最后检查输入是否大于0，不符合则返回"You have to enter a positive number"

每个规则函数返回布尔值（验证通过）或字符串（验证失败的提示信息），完全符合Vuetify的规则要求。

内容的提问来源于stack exchange，提问作者Lynette García