使用Laravel @push Blade模板引擎动态推送脚本

如何解决使用Laravel @push Blade模板引擎动态推送脚本

我有一个Laravel组件，它负责创建一个select2字段并绑定一个livewire属性。它工作正常，但问题是我有一个页面需要动态表单，该页面包含一个负责创建动态字段的添加字段按钮。这就是问题所在，因为页面已经加载，所以用Laravel组件中的@push指令包装的脚本代码不会被推送到@stack。

有人遇到这种问题吗？请帮助我，我陷入了困境。我正在使用Laravel 8.x和Livewire 2.x

输出得到： [1]：https://i.stack.imgur.com/bfZYP.png

选择两个刀片组件

<div wire:ignore>
    <select class="form-control select2" style="width: 100%" id="{{ $id }}" {{ $attributes }}>
        @if ($placeHolder)
            <option></option>
        @endif
        @foreach ($iteratable as $iteratableItem)
            <option value="{{ $value ? $iteratableItem->{$value} : $iteratableItem }}">
                {{ ucwords(implode(' ',explode('-',$label ? $iteratableItem->{$label} : $iteratableItem))) }}
            </option>
        @endforeach
    </select>

    @push('js')
    <script>
        $(document).ready(function() {
            let currentSelect = $('#{{ $id }}');
            let isMultiple = currentSelect.attr('multiple') ? true : false;
            let placeHolder = '{{ $placeHolder }}';
            let selectOptions = {
                placeholder: placeHolder,allowClear: isMultiple
            };
            
            currentSelect.select2(selectOptions);
            currentSelect.on('change',function() {
                let elementName = $(this).attr('wire:model');
                var data = $(this).val();
                @this.set(elementName,data);
            })
        });
    </script>
    @endpush
</div>

Foreach循环负责创建动态循环：

@foreach ($rater_type as $index => $raterField)
    <div class="form-group">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="rater_type-{{ $index }}">Rater Type</label>
                    <small class="required">Required</small>
                    <x-select-two-field name="rater_type[]" id="rater_type-{{ $index }}" place-holder="Select Rater Type #{{ $index + 1 }}" required :iteratable="$registeredRaterTypes" value="id" label="name" wire:model="rater_type.{{ $index }}" />
                    @error('rater_type.{{ $index }}') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="rater_count-{{ $index }}">Rater Count</label>
                    <small class="required">Required</small>
                    <input class="form-control" type="number" min="1" step="1" name="rater_count[]" id="rater_count-{{ $index }}" placeholder="Number of Raters for Rater Type #{{ $index + 1 }}" wire:model.debounce.600ms="rater_count.{{ $index }}" required />
                    @error('rater_count.{{ $index }}') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <div class="btn-group" role="group">
                @if ($loop->last)
                <button type="button" class="btn btn-success btn-sm" wire:click="addRaterField">
                    <i class="fas fa-plus mr-2"></i>
                    Add Rater
                </button>
                @endif
                @if (($loop->last && !$loop->first) || !$loop->last)
                <button type="button" class="btn btn-danger btn-sm" wire:click="removeRaterField({{ $index }})">
                    <i class="fas fa-close mr-2"></i>
                    Remove Rater
                </button>
                @endif
            </div>
        </div>
    </div>
    @endforeach

解决方法

在你的livevirefile中添加emit函数

$this->emit('loadData');

并在刀片文件中的此函数中调用相关的javascript函数

window.livewire.on('loadData',() => {

// your code

});

我认为它会起作用