Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

_SOXIT_'s avatar

Wire ignore self not working

You can also instruct Livewire to only ignore changes to attributes of the root element rather than observing changes to it's contents using wire:ignore.self.

<div wire:ignore.self>
    <!-- ... -->
</div>

This is my livewire component, swiper is initilized outside of the component and on elements where I added wire:ignore, everything works still after livewire updates, but elements where I used livewire:ignore.self as described from docs mentioned above, it doesn't work, it removes every dynamically appended attributes by swiper. Re-initing swiper doesnt work neither.. Thats why I need wire:ignore.self.. Thanks for any help!

<form class="swiper mySwiper" wire:submit='save' wire:ignore.self>
    @csrf
    <div class="swiper-wrapper" wire:ignore.self>
        @foreach ($page->blocks as $blockData)
            <div class="swiper-slide" wire:ignore.self>
                @php
                    $pageBlock = \Z3d0X\FilamentFabricator\Facades\FilamentFabricator::getPageBlockFromName($blockData['type'])
                @endphp
            
                @isset($pageBlock)
                    <x-dynamic-component
                        :component="$pageBlock::getComponent()"
                        :attributes="new \Illuminate\View\ComponentAttributeBag($pageBlock::mutateData($blockData['data']) + ['last' => $loop->last])"
                    />
                @endisset
            </div>
        @endforeach
    </div>
    <div class="swiper-button-nextt flex items-center justify-center" wire:ignore>
        <svg data-slot="icon" fill="none" stroke-width="1.5" class="w-8 h-8" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
        </svg>
    </div>
    <div class="swiper-button-prevt flex items-center justify-center" wire:ignore>
        <svg data-slot="icon" fill="none" stroke-width="1.5" class="w-8 h-8" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"></path>
        </svg>
    </div>
    <div class="swiper-pagination" wire:ignore></div>
</form>
0 likes
3 replies
_SOXIT_'s avatar

@Snapey well as the docs say, wire:ignore.self should ignore changes of the root element. But it is not ignoring, its changing the root element..

hassan982g's avatar

I am using livewire 3.4 this is blade

@push('scripts')

@endpush but i am getting error in console "Uncaught Component already registered"

Please or to participate in this conversation.