Dynamically push scripts using Laravel @push Blade Template Engine

Question

I have a Laravel component that is responsible for creating a select2 field and binding a livewire property. It worked fine but the problem is I have a page that requires a dynamic form that contains an add field button that is responsible for creating dynamic fields. That's where the problem comes in, the script codes wrapped with @push directive inside the Laravel component aren't getting pushed to the @stack since the page is already loaded.

Does anyone come across this kind of problem? Please help me, I got stuck on this. I am using Laravel 8.x and Livewire 2.x

Output am getting: [1]: https://i.stack.imgur.com/bfZYP.png

select-two blade component

<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 loop responsible for creating dynamic loops:

@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

Answer 1

add emit function in your livevirefile like

$this->emit('loadData');

and call relevent javascript functions within this function in blade file

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

// your code

});

I think It wil work