Блог

Я использую Laravel 8, PHP 8 и livewire 2.

У меня есть полностраничный компонент Livewire. У меня есть кнопка для переключения простого флага между ложью и истиной.

 <Button wire:click="changeStatus"></Button>
 

В классе компонента Fullpage:

 public $showUpgradeForm;

public function mount()
{
    $this->showUpgradeForm = false;
}

public function changeStatus()
{
    $this->showUpgradeForm = true;
}
 

С учетом компонента Fullpage:

 @if($showUpgradeForm)
    <livewire:upgrade-form>
@else
    <p>show something else</p>
@endif
 

Все в порядке, и дочерний компонент отображается правильно, но jQuery после этого шага любые коды не будут работать в целом для дочернего и главного компонентов.

Примечание: Я попытался загрузить jQuery.js в полностраничном блейде или в дочернем блейде ничего не изменилось.

…………………………………….. Я перепробовал множество способов решения этой проблемы. и, наконец, я понял, что в полностраничных компонентах я не могу использовать операторы @if для отображения форм, в которых используются некоторые операторы jQuery, такие как проверка jquery и … В этой ситуации из-за обновления всех других элементов DOM в компоненте Fullpage эти работающие компоненты jQuery выйдут из строя.

Для решения этой проблемы я использовал промежуточный компонент, который действует как переключатель. и я делаю операторы @if для этого компонента, чтобы показать другие дочерние компоненты.

Теперь это работает на меня как заклинание!

Эмиссия из компонента PHP

 $this->emit('your_event');
 

И зацепитесь за свой клинок, чтобы загрузить js-код

 @section('script')
    <script>
        window.livewire.on('your_event', message => {
            alert('go');
            // your js code
        });
    </script>
@endsection