使用laravel 资源路由执行删除操作的一次记错

错误描述

如图所示,每个删除后面的id都不一样,但是我点击后面的每个删除却总是删除一个..

比如我点击第二个删除,路由应该是/games/3,但是他还是删除了games/2..

渲染代码

以下就是这个td的渲染代码


<td>
                    <a href="{{ route('games.edit',['id'=>$game->id]) }}" class="layui-btn" target="_self">编辑</a>

                    <a href="{{ route('games.destroy',$game->id) }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();" class="dropdown-item notify-item">
                        <button class="layui-btn layui-btn-small layui-btn-normal">
                            <i class="layui-icon"></i> 删除
                        </button>
                    </a>

                    <form id="logout-form" action="{{ route('games.destroy',['id'=>$game->id]) }}" method="POST"
                          style="display: none;">
                        {{ makeMethod('DELETE') }}
                        {{ csrf_field() }}
                    </form>
                </td>

解读代码

当我们点击每个删除按钮的时候.我们会阻止这段这个a链接跳转.同时去js提交一个id=logout-form的form表单

onclick="event.preventDefault();document.getElementById('logout-form').submit();"

从这段代码我们就不难看出问题的所在,在js中id是唯一的,这也就是为什么我们每次点击其他删除按钮的时候,自然会删除第一个form.

所以我们要做的就是给各自的删除按钮绑定一个唯一的id form表单即可

修正代码

修正a链接的onclick代码,这里我们后面拼接上各自的ID即可

onclick="event.preventDefault();document.getElementById('logout-form{{ $game->id }}').submit();"

修正form表单 同样的保持一致

<form id="logout-form{{ $game->id }}".....