如何将Laravel Eloquent对象传入JavaScript函数？

直接传递{{$info}}会导致JS无法识别正确的对象结构，因为Eloquent对象直接输出会变成非标准的字符串格式。以下是两种可行的解决方式：

方法一：使用Blade的@json指令（推荐） #

Blade内置的@json指令会自动将Eloquent对象序列化为合法的JSON字符串，同时处理好HTML转义，避免引号冲突：

<td><i class="fa-solid fa-pen-to-square" onclick="showPopUp(@json($info))"
       style="cursor: pointer; color: blue"></i></td>

如果需要只传递指定字段（避免泄露敏感数据），可以先筛选字段再转JSON：

<td><i class="fa-solid fa-pen-to-square" onclick="showPopUp(@json($info->only(['id', 'name', 'email', 'workplace_name', 'department_name'])))"
       style="cursor: pointer; color: blue"></i></td>

方法二：手动使用json_encode #

通过PHP的json_encode函数序列化对象，配合参数处理引号转义：

<td><i class="fa-solid fa-pen-to-square" onclick="showPopUp({{ json_encode($info, JSON_HEX_APOS) }})"
       style="cursor: pointer; color: blue"></i></td>

JSON_HEX_APOS会将单引号转成Unicode编码，避免和onclick属性的单引号冲突；如果onclick使用双引号包裹，则可以用JSON_HEX_QUOT参数。

对应的JavaScript函数示例 #

在JS中直接接收对象即可使用：

function showPopUp(userInfo) {
    // 示例：打印用户名称和邮箱
    console.log('用户名：', userInfo.name);
    console.log('邮箱：', userInfo.email);
    // 后续弹窗逻辑
}

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