How to pass data from a parent blade to a included modal? - php

Question

I am trying to call a modal on a button click and pass through an $incident array, which will then be passed through the properties of a Vue component. How do you pass through data from a parent blade through to an included modal? i tried using data-attach but i think that is wrong.
I currently have a table looping through an incidents array passed through to my blade:
#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
This is the modal i am trying to pass data to:
<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 way i can pass through array data on modal load?

Answer 1

You can use $emit method for this purpose.
v-on directive captures the child components events that is emitted by $emit
Child component triggers clicked event:
export default {
methods: {
onClickButton (event) {
this.$emit('clicked', 'someValue')
}
}
}
Parent component receive clicked event:
<div>
<child #clicked="onClickChild"></child>
</div>
export default {
methods: {
onClickChild (value) {
console.log(value) // someValue
}
}
}