Laravel配合Vue JS时Axios GET返回数字而非数据库UUID的问题

问题根因 #

这个问题出在Laravel Eloquent模型的默认配置上，和Axios、Vue侧无关。
Laravel的模型默认假定主键是自增整数类型，序列化输出到JSON时会自动将主键字段强制转换为整数，因此你的UUID字符串会被截断为开头的数字部分，刚好匹配你遇到的返回0、5这类单个数字的情况。

解决步骤 #

1. 修改Notifications模型配置 #

在你的App/Models/Notifications.php文件中添加以下三个属性声明：

class Notifications extends Model
{
    // 声明主键不是自增的
    public $incrementing = false;
    // 声明主键类型为字符串
    protected $keyType = 'string';
    // 确认主键字段名（默认是id可省略，特殊修改过的话要对应改成你的主键名）
    protected $primaryKey = 'id';

    // 原有模型的其他代码...
}

2. 修正前端Axios赋值逻辑（可选，根据你实际接口返回结构调整） #

你当前Laravel返回的JSON结构是外层包裹了notifications字段：

{"notifications": [通知1, 通知2, ...]}

但你在Vue中直接把response.data赋值给unreadNotifications，会导致拿到的是外层对象而非数组，你需要修改为：

.then((response) => {
    this.unreadNotifications = response.data.notifications
})

验证方法 #

修改完成后可以直接在浏览器地址栏访问接口地址/user/notifications/unreads，查看返回的JSON中id字段是否已经显示为完整的UUID，如果是就说明后端问题已经修复，前端逻辑调整后即可正常使用。

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