Inyectar Vanilla JavaScript en wire:model de Laravel Livewire

▶

Trabajar con Livewire simplifica muchas tareas en Laravel, pero cuando queremos usar JavaScript puro (vanilla JS) dentro de un componente, las cosas se complican. Livewire mantiene su propio sistema de reactividad, y eso hace que los cambios realizados directamente sobre el DOM no siempre se reflejen en las propiedades del componente.

Por qué combinar JavaScript nativo y Livewire puede ser un reto

El principal conflicto surge porque Livewire y el DOM no hablan el mismo idioma. En Livewire, cada campo que usa wire:model está vinculado a una propiedad en la clase del componente. Sin embargo, si se cambia el valor del campo desde JavaScript puro, Livewire no lo detecta automáticamente.

Cuando intenté modificar un campo con document.querySelector('#toc').value = 'vanilla JS';, parecía funcionar, pero la propiedad en la clase Livewire seguía con su valor anterior. Me di cuenta de que el cambio visual no implicaba una actualización del estado interno.

En resumen, existen dos capas independientes:

• La vista: el campo visible en el formulario.
• La clase: la propiedad que Livewire gestiona en segundo plano.

Ambas solo se sincronizan si el cambio ocurre mediante los mecanismos internos del framework. Por eso, al modificar el DOM directamente con JavaScript, el componente no reacciona.

Cómo inyectar JavaScript puro dentro de un componente Livewire

En este artículo explico cómo logré integrar código JavaScript nativo en un componente Livewire, sincronizando correctamente el valor de un campo mediante el evento input. El resultado es una forma práctica y limpia de combinar ambos mundos sin perder la reactividad.

Esto, en esencia, corresponde a un campo en Livewire. Tal como puedes ver, tenemos su componente, su clase y todo lo demás:

<input id="toc" class="block mt-1 w-full" wire:model="toc" />

El problema surge cuando quiero ejecutar un JavaScript X que genere algo y usarlo en un campo en particular; pero, desde Livewire NO podemos hacer este cambio directamente,  ya que es un proceso que depende más de JavaScript puro y tradicional. 

Mi idea es referenciar este campo llamado toc del índice y establecer de manera dinámica, apenas cargue la página, el valor correspondiente.

El análisis es sencillo. básicamente, convertí el árbol en un JSON y quise guardarlo en este campo. En primera instancia parece que funciona, pero si observamos con detalle, no es así:

document.querySelector('#toc').value == 'vanilla JS' 

Recordemos que tenemos dos capas:

1. La vista: El campo o input en el formulario.
2. La clase: La propiedad definida en la clase.

Estas no se sincronizan automáticamente si hacemos el cambio mediante solamente vanilla JS, por lo que de manera directa no funciona.

Aquí surge la pregunta: ¿por qué usar JavaScript nativo en lugar de depender del JavaScript que trae Livewire?

La respuesta es que el JavaScript de Livewire es muy cerrado: todo debe ejecutarse de forma local en el componente de Livewire, lo que mata un poco la modularización y des desde allí que pudieramos referenciar el JS de Livewire mediante el $wire o this.

Ejemplo práctico paso a paso

Existen varias alternativas. Por ejemplo:

Usar un componente en AlpineJS:

<input type="text" id="toc" x-data x-on:click="$wire.set('toc', 'aaa')">

Definir el valor de forma manual con más control.

Esta última opción fue la que apliqué, porque me permite generar el JSON, guardarlo en el campo y luego disparar un evento del navegador:

const json = JSON.stringify(data, null, 2);
input = document.querySelector('#toc')
input.value = json;
input.dispatchEvent(new Event('input'));

La clave: el evento input

Una vez hecho el cambio, lo que falta es disparar un evento con:

input.dispatchEvent(new Event("input"));

Esa última instrucción es la que realmente hace que Livewire reconozca el cambio. Al disparar manualmente el evento input, el framework interpreta que el usuario modificó el campo, y sincroniza la propiedad toc en la clase correspondiente.

Este pequeño detalle marca la diferencia: sin ese evento, el cambio es solo visual; con él, se mantiene la reactividad.

En mi caso, esta fue la única manera de lograr que Livewire actualizara la propiedad sin recurrir a métodos internos o dependencias adicionales.

En otras palabras, es como un pequeño hack que nos permite forzar la sincronización.

El secreto está en el evento input: sincroniza Livewire con el DOM

Frameworks como Vue, React y Livewire usan eventos del navegador para detectar cambios. El evento input es el que indica que el usuario escribió o modificó el contenido de un campo. Al dispararlo manualmente, engañamos (de forma legítima) al sistema de reactividad para que actualice su estado.

Este enfoque tiene la ventaja de mantener independencia total entre el JavaScript nativo y el código de Livewire. No es necesario acceder al componente con $wire ni usar referencias especiales. Además, permite integrar librerías o scripts externos que generen valores dinámicos (como un editor, un generador de JSON o un árbol de datos) y enviarlos directamente a Livewire.

Alternativas: AlpineJS, $wire.set() y eventos personalizados

Otra opción es usar AlpineJS, que ya viene integrado con Livewire y facilita la comunicación:

<input type="text" id="toc" x-data x-on:click="$wire.set('toc', 'aaa')">

Esta aproximación funciona bien, pero tiene menos control sobre los datos, especialmente cuando se necesita modificar valores generados dinámicamente o manejar objetos complejos. En mi caso, preferí hacerlo con JavaScript puro, porque me permitía manipular el DOM directamente y decidir cuándo sincronizar el estado.

También podrías disparar eventos personalizados o usar window.dispatchEvent() para notificar cambios más globales, aunque suele ser innecesario si el objetivo es simplemente actualizar un campo vinculado.

Consejos y buenas prácticas para integrar JavaScript en Livewire

1. Evita modificar el DOM sin evento asociado. Livewire no lo detectará.
2. Usa dispatchEvent(new Event('input')) cuando necesites forzar sincronización.
3. Mantén el control local. No dependas del JavaScript interno de Livewire si buscas modularidad.
4. Prueba con AlpineJS solo si tu cambio es trivial. Para procesos complejos, vanilla JS ofrece más control.
5. Verifica el estado desde la consola. Usa $wire.get('propiedad') para comprobar que la sincronización fue exitosa.

FAQs sobre JavaScript y Livewire

¿Por qué Livewire no detecta cambios hechos con JavaScript?
Porque Livewire escucha eventos, no mutaciones directas del DOM. Si no disparas un evento, el framework no sabe que hubo un cambio.

¿Puedo usar JavaScript nativo sin AlpineJS?
Sí. Solo asegúrate de emitir el evento input después de modificar el valor del campo.

¿Qué diferencia hay entre $wire.set() y dispatchEvent('input')?
$wire.set() comunica el cambio directamente a Livewire, mientras que dispatchEvent() mantiene la lógica natural del DOM y puede integrarse mejor con scripts externos.

¿Funciona también con JSON o estructuras complejas?
Sí, siempre que conviertas los datos a texto (JSON.stringify()) antes de asignarlos al input.

Conclusión final

Integrar JavaScript nativo en Laravel Livewire es totalmente posible y, en muchos casos, recomendable. La clave está en entender cómo Livewire gestiona la reactividad y qué eventos utiliza para detectar cambios. En mi caso, disparar manualmente el evento input fue suficiente para sincronizar un campo dinámico generado desde JavaScript puro.

Con esta técnica, puedes combinar la potencia de Livewire con la flexibilidad del JavaScript tradicional sin perder control ni romper el ciclo de actualización del framework.