Hello Vale,
The issue you're encountering is due to the way Livewire handles scripts when updating the DOM. The @script directive is indeed executed after the page load but before the component is rendered for the first time. However, when you update a Livewire component, it doesn't re-execute scripts within the @script directive because Livewire tries to be smart about DOM diffing and updating to avoid re-running scripts unnecessarily.
To solve this, you can use Livewire's JavaScript hooks to reinitialize your charts after Livewire has updated the DOM. Here's how you can do it:
- Remove the
@scriptdirective from your Livewire component's blade template. - Add a JavaScript listener for Livewire's
message.processedevent, which is fired after Livewire has finished processing the update and the DOM has been updated.
Here's an example of how you might implement this:
<div wire:init="loadChartData">
<!-- Your charts container here -->
<div id="chart_div"></div>
</div>
<script>
document.addEventListener('livewire:load', function () {
// Function to initialize the charts
function initCharts() {
// Your Google Charts initialization code here
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Your chart drawing logic here
}
}
// Initialize the charts on page load
initCharts();
// Reinitialize the charts after Livewire updates
Livewire.hook('message.processed', (message, component) => {
initCharts();
});
});
</script>
In this example, initCharts is a function that contains the logic for loading and drawing your Google Charts. This function is called once when the page loads (livewire:load event) and again every time Livewire finishes processing an update (message.processed hook).
Make sure to replace the chart initialization and drawing logic with your actual code. This approach ensures that your charts are reinitialized after every Livewire update, which should solve the issue of the charts not appearing after the data is filtered.
I hope this helps! Let me know if you have any further questions.
