Mar 4, 2024
0
Level 1
Update component JS for chart when component refresh\re-render
Hello, I am using ApexChart and added that in the Livewire component,
<select class="form-select form-select-solid" aria-label="Select example" wire:model.change="expiry">
<option>Select Expiry</option>
<option value="2024-03-28">2024-03-28</option>
<option value="2024-04-25">2024-04-25</option>
</select>
<div class="card-body" id="chart">
--This is chart
</div>
@push('scripts')
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
@endpush
When the page loads, the component loads and I can see a chart with correct data. So far all good.
Now, I have select option in the component and based on the selected value, data are being queried in DB and I get the correct data,
I can see the component getting refreshed, but I don't see any updates in chart data, and even console.log() doesn't print anything, so it looks like the script inside the component doesn't reactivate.
So how to refresh scripts which are inside livewire component itself?
Please or to participate in this conversation.