Tengo un componente livewire muy simple
class Test extends Component { public $test = "test"; public function submit() { dd($this->test); } public function render() { return view('livewire.test'); } }y ver
<div> <form wire:submit.prevent="submit" method="post"> <input type="text" wire:model="test" id="test"> <button type="button" id="ok">ok</button> <button type="submit">submit</button> </form> <script> const button = document.getElementById('ok'); button.addEventListener('click', function() { const input = document.getElementById('test'); input.value = "Test"; }); </script> </div>Simplifiqué el código con fines ilustrativos para mostrar que JavaScript cambia un valor.
Cuando hago clic en ok , lo que cambia el valor de test a Test y luego lo submit , se muestra test en lugar de Test .
Excepto ver Test . ¿Qué estoy haciendo mal?
Parece que el componente Livewire no reconoce el cambio del código Javascript, ya que la siguiente función tampoco se activa:
public function updatedTest() { dd("Fired"); }No puede manipular las propiedades de esa manera con Livewire. La forma preferida es utilizar el método de entangle de AlpineJS, que se ocupa específicamente de compartir el estado entre Livewire y su cliente.
Dicho esto, puede lograr lo que busca sin usar AlpineJS. Reemplazar su JavaScript existente con el siguiente debería obtener el resultado que está buscando.
<script> document.addEventListener('livewire:load', (evt) => { const button = document.getElementById('ok'); button.addEventListener('click', function() { document.getElementById('test').value = @this.test = 'Test'; }); }) </script>