首页 > 解决方案 > 为什么 Bootstrap Modal 在 Laravel 的 PHP 刀片文件中使用方括号不起作用?

问题描述

请协助诊断此问题。在第 1 部分的锚标记的 data-target 属性中,我使用方括号来格式化不起作用的数据。在第二部分中,我使用连字符格式化了 data-target 属性,它可以工作并显示模型。为什么会这样?

原文:不工作:data-target="#editCurriculum[{{ $curriculum->id }}]"

<a class="dropdown-item"
    href="{{ route('curriculum.edit', $curriculum) }}"
    style="cursor:pointer;" data-toggle="modal"
    data-target="#editCurriculum[{{ $curriculum->id }}]">
    <i class="fa fa-eye text-warning"></i> Edit
</a>

<div class="modal fade" id="editCurriculum[{{ $curriculum->id }}]" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal
                    title
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
</div>

改造:工作:data-target="#editCurriculum-{{ $curriculum->id }}"

<a class="dropdown-item"
    href="{{ route('curriculum.edit', $curriculum) }}"
    style="cursor:pointer;" data-toggle="modal"
    data-target="#editCurriculum-{{ $curriculum->id }}">
    <i class="fa fa-eye text-warning"></i> Edit
</a>

<div class="modal fade" id="editCurriculum-{{ $curriculum->id }}" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal
                    title
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
</div>

标签: phphtmllaravelbootstrap-4bootstrap-modal

解决方案


推荐阅读