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

Question

我有一个 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

Answer 1

在你的 livevirefile 中添加发射函数，如

$this->emit('loadData');

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

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

// your code

});

我认为它会起作用