Livewire 3 How to re-execute <script> on wire:model.live changes

Hi, How would any of you go by executing a block of code inside tags when wire:model.live change occur? Here is a scenario:

Volt Class component:

<?php
...
public string $type = 'robot';
...
?>
<!-- I want to execute this block of code every time the wire:model changes -->
<script> 
let el = document.getElementById('scroller');
...
</script>
<div>
	<div class="flex">
		<x-radio-input id="type-robot" value="robot" wire:model.live="type" />
		<x-input-label for="type-robot" value="Robot" />
	</div>
	<div class="flex">
		<x-radio-input id="type-human" value="human" wire:model.live="type" />
		<x-input-label for="type-human" value="Human" />
	</div>

	<div id="scroller"></div>
</div>

tykus

2 years ago

Level 104

Wrapping the HTML script tags with @script / @endscript directives should fix this issue for you.

@script
<script> 
let el = document.getElementById('scroller');
...
</script>
@endscript

codeXX

2 years ago

Level 1

@tykus That executes only once.

Please or to participate in this conversation.