wire:replace

El DOM diffing de Livewire es útil para actualizar los elementos existentes en su página, pero ocasionalmente puede necesitar forzar a algunos elementos a renderizarse desde cero para restablecer el estado interno.

En estos casos, puede usar la directiva wire:replace para indicar a Livewire que omita la difusión DOM en los hijos de un elemento, y en su lugar reemplace completamente el contenido con los nuevos elementos del servidor.

Esto es más útil en el contexto de trabajar con librerías javascript de terceros y componentes web personalizados, o cuando la reutilización de elementos podría causar problemas al mantener el estado.

Abajo hay un ejemplo de envolver un componente web con un shadow DOM wire:replace para que Livewire reemplace completamente el elemento permitiendo al elemento personalizado manejar su propio ciclo de vida:

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

    <div wire:replace>
        <!-- Este elemento personalizado tendría su propio estado interno -->
        <json-viewer>@json($algunaPropiedad)</json-viewer>
    </div>

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

También puede ordenar a Livewire que reemplace el elemento de destino así como todos los hijos con wire:replace.self.

<div x-data="{open: false}" wire:replace.self>
  <!-- Asegúrese de que el estado "abierto" se restablece a false en cada renderización -->
</div>