what I want is to show a modal alert mode when the patient has allergies and I am handling events
the error that I get
Mi modal
<div>
<div class="modal fade" wire:ignore.self id="allergieAlertModal" tabindex="-1" aria-labelledby="md-add-fileLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="md-add-fileLabel">{{ __('Allergies') }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">{{ __('Close') }}</button>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('openAllergieAlertModal', function() {
try {
var allergieAlertModal = new bootstrap.Modal(document.getElementById(
'allergieAlertModal'), {
keyboard: false
});
allergieAlertModal.show();
} catch (error) {
console.error('Error opening allergieAlertModal:', error);
}
});
});
</script>
@endpush
the class my modal
<?php
namespace AppHttpLivewireMedicalsClinicalHistoriesComponents;
use LivewireComponent;
class AllergiesAlertModal extends Component
{
protected $listeners = ['medicals.clinical-histories.components.alert' => 'openAllergiesAlert'];
public function openAllergiesAlert()
{
/*aqui mando un evento al frontend y lo escucho en mi modal*/
$this->dispatchBrowserEvent('openAllergieAlertModal');
}
public function render()
{
return view('livewire.medicals.clinical-histories.components.allergies-alert-modal');
}
}
I am working with Laravel and Livewire using nested components.
public function mount($patientId)
{
$this->updateView = false;
$this->patient = Client::query()
->with('patientData')
->find($patientId);
if (!$this->patient) {
redirect()->route('medicals.patients.index');
}
if ($this->patient->patientData->allergies) {
$this->emit('medicals.clinical-histories.components.alert');
}
}
public function render()
{
return view('livewire.medicals.clinical-histories.master');
}
}
The master class is the parent component that contains my modal
<div>
@livewire('shared.toolbar', [
'title' => __('Patients'),
'tags' => config('components.toolbar.medicals.patients.personalHistories.list.tags'),
])
<div class="row mt-2">
<div class="col-12">
<div class="card" style="border-radius:15px">
<div class="card-body">
@livewire('medicals.clinical-histories.components.patient-data', ['patient' => $patient])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card h-15" style="border-radius:15px">
<div class="card-body">
<div class="row">
<div class="col-12 col-md-12 col-xl-4">
@livewire('medicals.clinical-histories.components.vital-signs', ['patient' => $patient, 'historyId' => $historyId])
</div>
<div class="col-12 col-md-12 col-xl-4">
@livewire('medicals.clinical-histories.components.personal-history', ['patient' => $patient])
</div>
<div class="col-12 col-md-12 col-xl-4">
@livewire('medicals.clinical-histories.components.allergies', ['patient' => $patient])
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12 col-md-12 col-lg-6 col-xl-6 mb-2">
@if ($updateView)
@livewire('medicals.clinical-histories.components.evolution-notes-edit', ['patient' => $patient])
@else
@livewire('medicals.clinical-histories.components.evolution-notes', ['patient' => $patient])
@endif
</div>
<div class="col-12 col-md-12 col-lg-6 col-xl-6 mb-2">
@livewire('medicals.clinical-histories.components.clinical-histories', ['patient' => $patient])
</div>
</div>
</div>
@livewire('medicals.clinical-histories.prescriptions.components.prescription-modal', ['patient' => $patient])
</div>
@livewire('medicals.clinical-histories.components.cie10-modal')
@livewire('medicals.clinical-histories.components.allergies-alert-modal')
</div>
the error I want to solve
use a dd (in case you get into the allergy condition);