Script Not Executing in Livewire Component View

Hello everyone,

I'm working on a Livewire project and facing an issue where a JavaScript script is not executing in one of my component views. Here's the setup:

I have a main view that dynamically includes different component views based on the value of $activeTab. When $activeTab is set to a specific value, the corresponding view is included.

Example:

<div class="mt-4 ml-4 w-full">
    @if ($activeTab == 'tags')
        @include('livewire.campaign.tags')
    @endif
    <!-- Other tabs-->
</div>

In one of these included views (livewire.campaign.tags), I have a simple script:

<div>
    <!-- Some HTML code -->
    <script>
        console.log('test tags script');
    </script>
</div>

However, this script is not being executed. I'm looking for a way to execute JavaScript within the dynamically included Livewire component views. Any suggestions or solutions would be greatly appreciated!

Thanks in advance!

tykus

2 years ago

Best Answer

Level 104

Wrap the script tags with @script and @endscript directives


<div>
    <!-- Some HTML code -->
  @script
    <script>
        console.log('test tags script');
    </script>
  @endscript
</div>

https://livewire.laravel.com/docs/javascript#executing-scripts

codegirl

2 years ago

Level 6

Hi , i believe you need to add your code in @script tag. You can learn more about this on livewire website: https://livewire.laravel.com/docs/javascript

Houdinux

2 years ago

Level 1

Oh, wow, feeling dumb right now.

Thank you guys, marking the first answer as best answer.

Have a good day.

Please or to participate in this conversation.