Senden einer Postanforderung über Vuejs und Axios an ein Laravel-Backend

Question

Ich benötige Hilfe bei der Implementierung einer grundlegenden Ajax-Anfrage über vue zu meinem Laravel-Backend, ich habe einen Booleschen Namen in einer Tabelle namens courses und I ausgefüllt habe eine Ansicht, die alle Kurse abruft, die einem bestimmten Benutzer zugewiesen sind, und ihnen erlaubt, einen Knopf zu drücken, um den aktuellen Status des Kurses zu ändern, entweder abgeschlossen oder nicht, das ist es, das ist alles, was ich jetzt tun möchte Anfragen bekommen und posten, führt offensichtlich zu einer Aktualisierung der Seite, ich möchte, dass das dynamisch ist, indem ich nur das dom auffrische, ich bin so frustriert, dass ich das nicht alleine herausfinden konnte, weil ich denke, dass es einfach sein sollte Ich weiß nichts, wenn es darum geht, Vuejs zu verwenden.

Hier ist der bedeutende Teil meines CoursesController ist:

public function toggling($name) 
     { 
     $course = Course::where(['name' => $name])->first(); 

     $course->completed = !$course->completed; 
     $course->save(); 

     // return redirect()->back(); 
     return response()->json(['course' => $course], 202); 
     } 

Und hier ist der wesentliche Teil der Ansicht, dass die Kurse an den Benutzer bereitstellt, ist es ein Teil einer Tabelle:

<td> 
    <form method="POST" @submit.prevent="onSubmit" action="{{ route('course.completed', $course->name) }}" id="form-submit"> 
     {{-- {{ method_field('PUT') }} --}} 
     {{ csrf_field() }} 
     @if ($course->completed == true) 
     <button type="submit" class="btn btn-sm" id="coursetogglingtrue">Done!</button> 
     @else 
     <button type="submit" class="btn btn-sm" id="coursetogglingfalse">Not Yet!</button> 
     @endif 

     </form> 
    </td> 

Aus irgendeinem Grund funktioniert die @ submit.prevent -Methode nicht, es funktionierte ein paar Mal, aber dann tat es einfach nicht, und das Formular reichte wie gewohnt weiter.

Das sind die Skripte in app.blade.php, ich weiß nicht wie/wo soll ich das kompilieren, es sitzt einfach im Hauptlayout meines Projektes, sollte ich es in public/js/app übertragen .js? oder kompilieren Sie es mit Schluck? wenn Sie etwas im Sinn haben, lassen Sie es mich wissen:

<!-- Scripts --> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
<script src="/js/app.js"></script> 
<script> 
    new Vue({ 
     el: '#app', 
     data: { 
     course: {} 
     }, 
     methods: { 
     onSubmit() { 
      // course = $event.target; 
      axios.post('/MyCourses/{{course.name}}').then(console.log(course)); 
     } 
     } 
    }); 
</script> 

Ich möchte haben natürlich auch immer Wert des Antrags gleich war, so dass ich dann den Wert des Namens des Kurses ausrichten können, die eingereicht wurde und injiziere es auf die Route, während ich versuche, zu tun, aber ich bin mir nicht sicher, wie das geht, habe ich ein paar verschiedene Dinge ausprobiert, alles gescheitert. Und hier ist Routen/api.php

Route::post('/MyCourses/{name}', 'CoursesController@toggling')->name('course.completed'); 

OFC jetzt dies nicht funktioniert, wird das Formular einreichen, und ich bin auf eine Route umgeleitet, wo ich wieder die Json Antwort erhalten, und das ist es, ich will nur das dom aktualisieren, so dass der button die neue id je nach status des kurses hat, und der kurs selbst aktualisiert und im hintergrund gespeichert wird, ohne die seite zu aktualisieren. Ich bin ziemlich neu, ich verstehe, dass das Formular wahrscheinlich neu geschrieben werden sollte, und ich weiß, dass ich eine Menge Fehler gemacht habe, aber ich will nur, dass es funktioniert, so würde Hilfe sehr geschätzt werden.

UPDATE

Nach vielen Stunden von Versuch und Irrtum, ich mit dem Ajax-Teil fertig bin, und ich bin fast da mit dem Rest, ich muß nur ein paar Dinge zu tun ist, was ich habe es geschafft, so weit zu tun,

nach Ansicht:

<form method="POST" @click.prevent="onSubmit" action="{{ route('course.completed', $course->name) }}" id="form-submit"> 
         {{ csrf_field() }} 
    @if ($course->completed == true) 
    <button type="button" class="btn btn-sm" id="coursetogglingtrue">Done!</button> 
    @else 
    <button type="button" class="btn btn-sm" id="coursetogglingfalse">Not Yet!</button> 
    @endif 

Ändern der Art des Knopfes von werfen Taste erlaubt das.Verhindern, dass die Methode tatsächlich ausgelöst wird. Das Formular muss jetzt nicht mehr gesendet werden. Das Formular muss noch bearbeitet werden, damit die richtige Klasse ausgegeben werden kann.

Dies ist das Skript, das ich jetzt habe:

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
     course: { 
      name: '', 
      bool: false 
     } 
     }, 
     methods: { 
     onSubmit: function() { 
      this.course.bool = !this.course.bool, 
      axios.post('/MyCourses/{{$course->name}}') 
       .then(function (response){ 
        // {{$course->completed}} = response.course.completed; 
       }); 
     } 
     } 
    }); 
</script> 

Irgendwie gerade jetzt, ich schicke tatsächlich die Post-Anforderung an dem richtigen Weg, aber es gibt ein Problem, das jetzt die höchste Priorität hat, $ Kurs verweist auf den neuesten Kurs, der auf der Seite hinzugefügt wurde, und nicht der Kurs, den ich wählte, indem ich auf den Knopf drückte, jetzt, welcher Knopf auch immer ich drücke, der letzte Kurs wird $ natürlich gespritzt, und dann oc zu der Route in axois, ich weiß nicht, wie man das herauskommt, aber Soweit natürlich wird aktualisiert, und wenn ich die Netzwerk-Registerkarte in Chrome inspiziert, sehe ich die Antwort und der Wert der vervollständigten Spalte wird aktualisiert, ich glaube, dass es noch einige Fehler im Code sind, aber ich werde es weiter versuchen, wenn Sie zeigen können out einige weitere Dinge, lassen Sie mich bitte wissen, dank

Answer 1

Die Syntax Sie verwenden, ist falsch in folgende Zeile:

axios.post('/MyCourses/{{course.name}}').then(console.log(course)); 

Es sollte:

axios.post('/MyCourses/' + course.name).then(console.log(course));