Trying to implement a functionality where a modal is triggered on clicking a button and an array named $incident is passed through to the properties of a Vue component. What is the correct way to pass data from a parent blade to an included modal? I initially tried using data-attach but it doesn't seem to work as expected.
The current setup involves looping through an incidents array in the blade file:
@foreach($incidents as $incident)
<tr>
<td>{{ $incident->service_now_incident_number }}</td>
<td>{{ $incident->business_service_reference ?: 'N/A' }}</td>
<td>{{ $incident->status }}</td>
<td>{{ $incident->raised_date->format('d/m/y') }}</td>
<td>{{ $incident->email }}</td>
<td>
<a class="btn btn-primary" data-toggle="modal" data-target="#incident-details-modal" data-attach="{{$incident}}">View</a>
</td>
</tr>
@endforeach
Below is the code snippet for the modal where the data needs to be passed:
<div class="modal fade" id="incident-details-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<incident-details :incident="{{$incident}}"></incident-details>
</div>
</div>
</div>
Is there a recommended approach to passing array data when the modal is loaded?