Anruf Route von Knopf in einem <a> Tag Laravel

Question

Ich bin neu in Laravel und Javascript.

Ich habe eine Route, die wie

Route::get('/problems/{problem}/edit', 'AdminController@editProblem'); 

und meine Seite sieht sieht aus wie image

HTML-Code für diese Seite

ist

@foreach($in_contest->problems as $problem) 
    <div class="list-group"> 
     <a href="#" class="list-group-item"> 
      <i class="fa fa-file fa-lg"></i> 
      {{ $problem->title }} 
      <span class="pull-right"> 
       <button onclick="callRoute()" class="btn btn-xs btn-info button">Edit</button> 
      </span> 
     </a> 
    </div> 
@endforeach 

ich Javascript-Code für dieses Onclick schrieb die ist

<script type="text/javascript"> 
    function callRoute() { 
     window.location = '{{ url('/problems/' . $problem->id . '/edit') }}'; 
    } 
</script> 

jetzt jedes Mal, wenn ich auf die Schaltfläche Bearbeiten auf P1, P2 oder P3 klicke, öffnet sich die Bearbeitungsseite für P4. Die gleiche URL öffnet sich für alle. Ich möchte, wenn ich auf Bearbeiten auf P1 Redirect zu bearbeiten Seite für $ Problem-ID mit P1 klicken. und das Gleiche auch für die anderen.

Was ist die Lösung dieses Problems?

Answer 1

Der Grund dafür, dass p4 aufgerufen wird, besteht darin, dass Sie nach dem Ausführen der foreach-Schleife die letzte Iteration der Problem-ID in Ihr Javascript schreiben.

können Sie das Hinzufügen Blade-Syntax zu Ihrem Javascript, indem Sie Ihre Ansicht Code zu der alle zusammen folgenden vermeiden, so leitet sie die aktuelle Problem ID auf Ihre JavaScript-Funktion

@foreach($in_contest->problems as $problem) 
    <div class="list-group"> 
     <a href="#" class="list-group-item"> 
      <i class="fa fa-file fa-lg"></i> 
      {{ $problem->title }} 
      <span class="pull-right"> 
       <button onclick="callRoute({{ $problem->id }})" class="btn btn-xs btn-info button">Edit</button> 
      </span> 
     </a> 
    </div> 
@endforeach 

und Ihre JavaScript-Funktion auf die folgenden

<script type="text/javascript"> 
    function callRoute(problemID) { 
     window.location = '/problems/' + problemID + '/edit'; 
    } 
</script> 

Answer 2

Sie haben 4 Ergebnisse auf Ihrer Seite und Ihre callRoute Funktion ist außerhalb der Schleife so, nachdem die Schleife durchgeführt, es ist Aufgabe der Variable $problem Sie in Ihrem Skript-Tag zugreifen, ist die letzte über die Ergebnisse Kollektion iteriert ist also, warum es ist mit der ID 4

einfach schreiben sie einfach es wie

<button onclick="callRoute({{ $problem->id }})" class="btn btn-xs btn-info button">Edit</button> 

und in Ihrem Skript

function callRoute(problem_id) { 
    window.location = '/problems/' + problem_id + '/edit'; 
}