Laravel Blade向Vue传递UUID类型id出现类型转换错误

这个问题本质是Eloquent模型默认主键类型配置错误导致的序列化强转：
Laravel的Eloquent模型默认假设主键是自增整数类型，会默认执行两个配置：

• public $incrementing = true 开启主键自增
• protected $keyType = 'int' 主键类型强制为整数
  所以在调用json_encode序列化时，会自动把UUID格式的id强转为整数：以数字开头的UUID会被截断为开头的连续数字，以字母开头的UUID转整数会直接变为0，和你观察到的现象完全一致。

方案1：规范UUID主键模型配置（推荐） #

在对应的数据模型类中补充以下3项配置，一劳永逸解决所有序列化场景的类型问题：

class 你的模型类 extends Model
{
    // 关闭主键自增
    public $incrementing = false;
    // 指定主键类型为字符串
    protected $keyType = 'string';
    // 额外补充cast确保序列化时不会强转
    protected $casts = [
        'id' => 'string',
        // 其他字段的cast配置...
    ];
}

配置完成后清理Laravel缓存，再测试json_encode输出就会得到正确的字符串格式UUID。

方案2：临时手动转义（适合不想修改模型的场景） #

如果不方便修改模型配置，可以在序列化前手动将id转为字符串：

// 处理单个数据
$data->id = (string)$data->id;
// 处理数据集的话用集合map
$data = $data->map(function($item) {
    $item->id = (string)$item->id;
    return $item;
});

方案3：使用Blade自带的@json指令优化写法 #

Blade内置的@json指令比手动写{{ json_encode() }}处理字符转义更安全，配置完模型后可以把你的组件调用代码改成：

<my-component :data="@json($data)"></my-component>

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