NO se puede inyectar JavaScript mediante eventos de Laravel Livewire

Video thumbnail

Livewire no permite ejecutar JavaScript desde eventos como wire:click, wire:change, etc.; este bloqueo es por cuestiones de seguridad, es decir, una vez cargada la página, en navegador NO permite

Ejemplo claro:

<div class="mt-5">
@if ($buy)
   <h1>HELLO!!!!</h1>
   <script>
      alert()
   </script> 
@else
****
<button class="btn btn-success mb-3" wire:click="readyBuy">
      {{ __('Buy') }}
</button>

Por ejemplo, si cambiamos el valor de $buy mediante un evento de Livewire:

function readyBuy()
{
    $this->buy = true;
}

Esto NO funciona, el alert es ignorado por el navegador por lo comentado; lo que debes de hacer es cargar siempre el JS y mediante un evento de Livewire:

function readyBuy()
{
    $this->buy = true;
}

Pero si intento insertar ese script desde un evento de Livewire, como al hacer clic en un botón, no funciona. El navegador no lo ejecuta por cuestiones de seguridad.

¿Por qué no se puede inyectar JS desde eventos?
Los navegadores modernos bloquean la inyección dinámica de JavaScript por seguridad. Aunque puedas "engañarte" usando la consola del navegador, no es lo mismo que inyectarlo desde un evento dentro del ciclo de renderizado del navegador. El navegador lo bloquea, porque esto podría ser usado para inyectar scripts maliciosos.

Que ejecutamos desde el servidor:

function readyBuy()
{
    $this->buy = true;

    + $this->dispatch('load-payments', [
    +    'price' => $this->price,
    + ]);
}

Y definimos en el cliente:

<script>
Livewire.on('load-payments', async (data) => {
   alert()
})
</script> 

Acepto recibir anuncios de interes sobre este Blog.

Hablamos sobre una FALTA importante de Laravel Livewire y el uso de los eventos, NO se puede inyectar JS.

| 👤 Andrés Cruz

🇺🇸 In english