Laravel：如何在关联数组中传递HTML并在视图正确渲染

你的问题核心在于Blade模板的自动转义机制：当你用{{ $d['button'] }}输出内容时，Blade会自动将HTML字符转义成实体（比如把<转成<），所以你的按钮代码变成了纯文本显示，而不是被浏览器渲染成可点击的按钮。

下面给你两种可行的解决方案：

方案1：使用非转义输出语法 #

直接在视图中把{{ }}替换成{!! !!}，这个语法会告诉Blade不要转义HTML内容：

<tbody> 
    @foreach($datacol as $d) 
    <tr> 
        <td>{!! $d['button'] !!}</td> <!-- 这里改成{!! !!} -->
        <td>{{ $d['id'] }}</td> 
        <td>{{ $d['task_type'] }} - {{ $d['related_block'] }}</td> 
        <td>{{ $d['assigned_to'] }}</td> 
        <td>{{ $d['time'] }}</td> 
        <td>{{ $d['start_date'] }}</td> 
        <td>{{ $d['end_date'] }}</td> 
        <td>{{ $d['status'] }}</td> 
        <td>{{ $d['comments'] }}</td> 
    </tr> 
    @endforeach 
</tbody>

⚠️ 注意：使用{!! !!}时要确保内容是安全的，比如$task->id是你系统生成的、没有用户输入的恶意内容，避免XSS攻击风险。

方案2：在视图中生成HTML（更推荐） #

遵循MVC的分离原则，控制器负责传递数据，视图负责渲染HTML。你可以把按钮的HTML代码从控制器移到视图里，这样更清晰也更安全：

第一步：修改控制器，去掉数组中的button字段 #

$datacol[] = array( 
    'id' => $task->id, 
    'task_type' => DB::table('tasktypes')->where('id','=', $task->task_type_id)->value('task_type'), 
    'related_block' => DB::table('chapters')->where('id','=', $task->related_block)->value('description'), 
    'assigned_to' => DB::table('users')->where('id','=', $task->assigned_to)->value('display_name'), 
    'time' => DB::table('task_interactions')->where('task_id','=', $task->id)->pluck('task_time')->sum(), 
    'start_date' => DB::table('task_interactions')->where('task_id','=', $task->id)->where('status','=','In Progress')->pluck('created_at')->first(), 
    'end_date' => DB::table('task_interactions')->where('task_id','=', $task->id)->where('status','=','Finished')->pluck('created_at')->first(), 
    'status' => DB::table('tasks')->where('id','=', $task->id)->value('status'), 
    'comments' => DB::table('tasks')->where('id','=', $task->id)->value('comments') 
);

第二步：在视图中直接渲染按钮 #

<tbody> 
    @foreach($datacol as $d) 
    <tr> 
        <td>
            <a href="tasks/details/{{ $d['id'] }}" class="btn btn-sm"> 
                <i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i>
            </a>
        </td>
        <td>{{ $d['id'] }}</td> 
        <td>{{ $d['task_type'] }} - {{ $d['related_block'] }}</td> 
        <td>{{ $d['assigned_to'] }}</td> 
        <td>{{ $d['time'] }}</td> 
        <td>{{ $d['start_date'] }}</td> 
        <td>{{ $d['end_date'] }}</td> 
        <td>{{ $d['status'] }}</td> 
        <td>{{ $d['comments'] }}</td> 
    </tr> 
    @endforeach 
</tbody>

额外优化建议 #

你控制器里的多次DB::table()查询会导致N+1性能问题，推荐使用Laravel的Eloquent关联来优化：

1. 给Task模型定义关联（比如taskType、chapter、assignedUser等）
2. 使用with()预加载关联模型，这样只需要一次查询就能获取所有关联数据，比如：

$tasks = Task::with(['taskType', 'chapter', 'assignedUser', 'taskInteractions'])->get();

然后在数组中直接调用关联属性，比如$task->taskType->task_type，代码更简洁，性能也更好。

内容的提问来源于stack exchange，提问作者Marco Assunção