如何在 laravel 的 foreach 循环中添加一个模式来删除一个元素？
[英]How to add a modal to delete an element in a foreach loop in laravel?
问题描述
I have a loop showing different students, and in every line I have a delete option.
我有一个显示不同学生的循环，并且在每一行中我都有一个删除选项。 I want to write a modal to ask the user if he really wants to delete the element.我想写一个模式来询问用户是否真的要删除该元素。 If I make the loop like this:如果我这样循环：
@foreach($days as $day)
<tr>
<td>{{$day->name}}</td>
<td>
<form method="POST" action="{{route('days.destroy',$day)}}" data-toggle="tooltip" title="Eliminar día">
@csrf
@method('DELETE')
<button class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
Eliminar
</button>
</form>
@endforeach
the day is deleted with no modal, but if I add a modal like the following:删除了没有模态的那一天，但是如果我添加如下模态：
@foreach($days as $day)
<tr>
<td>{{$day->name}}</td>
<td>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
Eliminar
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">¿Desea eliminar?</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Si pulsa el siguiente botón, se eliminará el día. Si cierra esta ventana, no se eliminará.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<form method="POST" action="{{route('days.destroy',$day)}}" data-toggle="tooltip" title="Eliminar día">
@csrf
@method('DELETE')
<button class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
Eliminar
</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
@endforeach
then, the it doesn t matter which element I try to delete, because the element that will be deleted is the first element of the table. I don那么， t matter which element I try to delete, because the element that will be deleted is the first element of the table. I don t matter which element I try to delete, because the element that will be deleted is the first element of the table. I don t know why it happens and how to solve it. t matter which element I try to delete, because the element that will be deleted is the first element of the table. I don知道它为什么会发生以及如何解决它。
1 个解决方案
解决方案1
0 2023-01-27 18:11:09
The var $day seems like an object. var $day看起来像一个 object。
Maybe you can try to generate the route like route('days.destroy', $day->id)也许你可以尝试生成像route('days.destroy', $day->id)这样的路线
EDIT:编辑：
You need to assign different ID for each modal:您需要为每个模态分配不同的 ID：
@foreach($days as $day)
<tr>
<td>{{$day->name}}</td>
<td>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal{{$day->id}}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
Eliminar
</button>
<!-- The Modal -->
<div class="modal" id="myModal{{$day->id}}">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">¿Desea eliminar?</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Si pulsa el siguiente botón, se eliminará el día. Si cierra esta ventana, no se eliminará.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<form method="POST" action="{{route('days.destroy',$day)}}" data-toggle="tooltip" title="Eliminar día">
@csrf
@method('DELETE')
<button class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
Eliminar
</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
@endforeach
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.