如何在JavaScript动态插入内容时复用Laravel Blade组件并传入JS动态参数

问题1：修改模板时仅返回img标签的原因 #

你犯了两个错误：

1. 直接操作字符串转成的临时jQuery对象，没有保留修改后的完整DOM结构
2. 对字符串类型的template变量调用jQuery的prop()方法，自然只能获取到查询到的img标签内容

修复代码：

@push('scripts')
    <script type="text/template" id="my-template">
        @include('components.my-file', ['name' => 'my_name[][image]'])
    </script>
    <script>
        jQuery(function($) {
            $('body').on('click', '#btn-add', function() {
                const imageId = $(this).data('id');
                const imageUrl = $(this).data('url');
                // 获取模板字符串并转成jQuery对象，clone避免污染原模板
                const $tpl = $(document.getElementById('my-template').innerHTML).clone();
                // 替换动态属性
                $tpl.find('.image-placeholder').attr('src', imageUrl);
                $tpl.find('input[type="hidden"]').val(imageId);
                // 追加到目标容器
                $('#target').append($tpl);
            });
        });
    </script>
@endpush

更优方案：直接在Blade中预留JS模板占位符 #

你之前对@转义符的理解有误，它可以帮你输出Blade不解析的模板变量，不需要额外操作DOM：

1. 先修改你的Blade组件resources/views/components/my-file.blade.php，对可缺省的动态参数做兼容：

<div>
    <img src="{{ $imageUrl ?? '@{{imageUrl}}' }}" alt="" class="image-placeholder">
    <input type="hidden" name="{{ $name }}" value="{{ $imageId ?? '@{{imageId}}' }}">
</div>

2. 直接在JS中通过字符串替换填充动态值，用@verbatim指令包裹JS模板区域，避免Blade解析JS的模板语法：

@push('scripts')
<script>
jQuery(function($) {
    $('body').on('click', '#btn-add', function() {
        const imageId = $(this).data('id');
        const imageUrl = $(this).data('url');
        @verbatim
        // Blade会原样输出组件HTML，其中变量占位符为{{imageId}}、{{imageUrl}}
        const tpl = `@include('components.my-file', ['name' => 'my_name[][image]'])`;
        // 替换动态值
        const html = tpl.replaceAll('{{imageId}}', imageId).replaceAll('{{imageUrl}}', imageUrl);
        @endverbatim
        $('#target').append(html);
    });
});
</script>
@endpush

该方案完全复用同一个Blade组件，PHP侧和JS侧都不需要修改现有逻辑，性能也比DOM查询修改更高。

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