Директива wire:replace

Возможность Livewire сравнивать DOM-элементы полезна для обновления существующих элементов на странице, но иногда может потребоваться принудительно перерисовать некоторые элементы с нуля для сброса внутреннего состояния.

В таких случаях вы можете использовать директиву wire:replace, чтобы указать Livewire пропустить сравнение DOM для дочерних элементов элемента и вместо этого полностью заменить содержимое новыми элементами с сервера.

Это наиболее полезно при работе со сторонними JavaScript-библиотеками и пользовательскими веб-компонентами, а также когда повторное использование элементов может вызвать проблемы с сохранением состояния.

Ниже приведён пример оборачивания веб-компонента с теневым DOM в wire:replace, чтобы Livewire полностью заменял элемент, позволяя пользовательскому элементу управлять своим жизненным циклом:

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

    <div wire:replace>
        <!-- Этот пользовательский элемент имел бы собственное внутреннее состояние -->
        <json-viewer>@json($someProperty)</json-viewer>
    </div>

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

Вы также можете указать Livewire заменить целевой элемент, а также все дочерние элементы, используя wire:replace.self.

<div x-data="{open: false}" wire:replace.self>
  <!-- Убедитесь, что состояние «open» сбрасывается в false при каждой перерисовке -->
</div>

Справочник

wire:replace

Модификаторы

Модификатор	Описание
.self	Заменить сам элемент и все дочерние элементы вместо только дочерних элементов