#laravel #chart.js #laravel-livewire #jetstream
Вопрос:
Я создал простой модальный, используя модальный jetstreams:
lt;x-jet-dialog-modal wire:model="openChartModal"gt; lt;x-slot name="title"gt; lt;/x-slotgt; lt;x-slot name="content"gt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"gt;lt;/scriptgt; lt;canvas id="doughnut-chart" width="800" height="450"gt;lt;/canvasgt; lt;scriptgt; new Chart(document.getElementById("doughnut-chart"), { type: 'doughnut', data: { labels: [ "Building Insurance", "Security Cost", "Cleaning Service Cost", "Estate Fees", "Maintainance Cost", "Bond Repayment"], datasets: [ { label: "Expenses", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#295959"], data: [ {{$property-gt;building_insurance}}, {{$property-gt;security_cost}}, {{$property-gt;cleaning_service_cost}}, {{$property-gt;estate_fees}}, {{$property-gt;maintainance_cost}}, {{$property-gt;bond_repayment}}] } ] }, options: { title: { display: true, } } }); lt;/scriptgt; lt;/x-slotgt; lt;x-slot name="footer"gt; lt;x-jet-secondary-button wire:click="closeChartModal" wire:loading.attr="disabled"gt; {{ __('Cancel') }} lt;/x-jet-secondary-buttongt; lt;/x-slotgt; Он использует js диаграммы и данные, передаваемые через них, для создания диаграмм при нажатии кнопки диаграммы.
Это функция, используемая для модальной диаграммы:
public function chartModal($id){ $data = Property::find($id); $this-gt;openChartModal = true; $this-gt;building_insurance = $data-gt;building_insurance; $this-gt;security_cost = $data-gt;security_cost; $this-gt;cleaning_service_cost = $data-gt;cleaning_service_cost; $this-gt;estate_fees = $data-gt;estate_fees; $this-gt;maintainance_cost = $data-gt;maintainance_cost; $this-gt;bond_repayment = $data-gt;bond_repayment; } Проблема, с которой я сталкиваюсь, заключается в том, что он создает диаграмму в первый раз, но когда я закрываю модальную и открываю другую диаграмму ввода, она становится пустой, а когда я возвращаюсь к той, которую я сделал сначала, она также отображается пустой, пока я не обновлю страницу. Я пробовал сбрасывать переменные при закрытии, и это не помогает:
public function closeChartModal(){ $this-gt;resetFilters(); $this-gt;openChartModal = false; } Есть какие-нибудь идеи