Inline Javascript On Nested Component

#1

Hello,

I have a Quiz component that cycles through Question subcomponents. My issue is that some of the question types require some Javascript to function: https://codepen.io/jjjrmy/pen/GRpqLEZ

No matter what I’ve tried I cannot get the scripts to run as they are added to the page later when that component is called.

I found this doc but it’s not working for my use case: https://laravel-livewire.com/docs/inline-scripts/

Please note that your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later - emit the event from the component and listen to it in JavaScript as described here)

The scripts only seem to work if the component is active during first render. I have tried adding a trigger inside the nested component to run it’s own script but that also does not work.

Please Help!

#2

I’ve been playing around with it some more and it seems like it’s not possible to run the $this->emit() in the mount() or render() functions.

#3

Any new about it, nested component not work push script, but work if I put in parent component.

@push('scripts')
    <script>
......
    </script>
@endpush
#4

No solution yet, I have spoken with Caleb and it is on the roadmap.

Roadmap
Add wire:eval for latent script tag evaluation

Currently my workaround is to use AlpineJS for all javascript in nested components.