I am facing a challenge with my Laravel blade template that uses a foreach loop to create a table with data. Each row has a link that triggers a modal when clicked. However, the issue is that clicking on any link activates the modal for every row instead of specific to the clicked row. Here's the current code snippet:
@section('content')
<div id="app">
<table class="uk-table uk-table-hover">
<thead id="table-header">
<tr>
<th> Number</th>
<th> Name</th>
<th> Updated</th>
</tr>
</thead>
<tbody>
@foreach($results as $result)
<tr class="" id="">
<td>
<a id="show-modal" @click="showModal = true">{{$result['number']}}</a>
<modal v-if="showModal" @close="showModal = false">
</td>
<td>
{{$result['name']}}
</td>
<td>
{{$result['updated']}}
</td>
</tr>
@endforeach
</tbody>
</table>
<!-- Modals -->
<!-- End container -->
</div>
@endsection
@section('loadjs')
@include('js.datatables')
<script type="text/javascript">
Vue.component('modal',{
template: '#modal-template'
})
new Vue({
el:'#app',
data: {
showModal: false
}
})
</script>
<!-- Modals -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
@endsection
I'm seeking advice on how to modify the code so that the modal corresponds to the specific row that was clicked.