Livewire v3 wire:ignore

wire:ignore

Livewire がページを更新する機能は、Livewire を「ライブ」たらしめるものですが、Livewire がページの一部分を更新しないようにしたい場合があります。Livewire's ability to make updates to the page is what makes it "live", however, there are times when you might want to prevent Livewire from updating a portion of the page.

このような場合、wire:ignore ディレクティブを使用して、Livewire に特定の要素の内容を無視するように指示できます。たとえリクエスト間で変更されたとしてもです。In these cases, you can use the wire:ignore directive to instruct Livewire to ignore the contents of a particular element, even if they change between requests.

これは、カスタムフォーム入力などで、サードパーティの JavaScript ライブラリを使用する場合に最も役立ちます。This is most useful in the context of working with third-party javascript libraries for custom form inputs and such.

以下は、サードパーティライブラリで使用される要素を wire:ignore で囲み、Livewire がライブラリによって生成された HTML を改ざんしないようにする例です。Below is an example of wrapping an element used by a third-party library in wire:ignore so that Livewire doesn't tamper with the HTML generated by the library:

<form>
    <!-- ... -->

    <div wire:ignore>
        <!-- この要素は、初期化のためにサードパーティライブラリから -->
        <!-- 参照されます... -->
        <input id="id-for-date-picker-library">
    </div>

    <!-- ... -->
</form>

wire:ignore.self を使用して、ルート要素の内容の変更を監視するのではなく、属性の変更のみを無視するように Livewire に指示することもできます。You can also instruct Livewire to only ignore changes to attributes of the root element rather than observing changes to its contents using wire:ignore.self.

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