Laravel 9接口返回数据无法在Vue 3 UI显示的问题排查

核心问题在于API返回的is_urgent字段是布尔类型（false/true），但你的Vue代码里的计算属性却用整数0/1做严格相等比较，导致过滤后没有匹配的Todo项，最终UI显示为空。

从你提供的API返回数据可以明确看到：

{
    "id": 67,
    "text": "Thing1",
    "is_done": false,
    "is_urgent": false,
    "created_at": "2022-08-24T09:16:37.000000Z",
    "updated_at": "2022-08-24T09:16:37.000000Z"
}

而你的计算属性代码是：

simpleTodos() {
    return this.allTodos.filter(todo => todo['is_urgent'] === 0);
},
urgentTodos() {
    return this.allTodos.filter(todo => todo['is_urgent'] === 1);
}

布尔值false和整数0在严格相等（===）比较下结果为false，true和1同理，因此两个过滤结果都是空数组，UI自然无法显示任何Todo。

修复步骤 #

修改计算属性的过滤条件，改用布尔值判断逻辑：

simpleTodos() {
    return this.allTodos.filter(todo => !todo['is_urgent']);
},
urgentTodos() {
    return this.allTodos.filter(todo => todo['is_urgent']);
}

你也可以选择调整Laravel后端，确保is_urgent返回整数类型，但前端直接适配布尔值的修改更快捷。

环境差异原因 #

本地运行正常是因为你的本地数据库配置或Laravel模型字段转换设置不同，导致API返回的is_urgent是整数0/1；而Heroku环境中数据库字段为布尔类型，Laravel直接返回布尔值，从而出现了环境差异。另外，创建新Todo时你传入的是is_urgent: 0，服务器保存后返回的依然是布尔值，所以刷新页面后新Todo也会因同样的过滤问题消失。

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