通過Vuejs和axios向laravel後端提交post請求

Question

我需要通過vue實現基本ajax請求來幫助我的laravel後端，我有一個名爲completed的布爾值，名爲courses，有一種觀點，即獲取分配給特定用戶的所有課程，並允許他們按下按鈕來更改課程的當前狀態，無論是否已完成，就是這樣，這就是我想要做的，現在我可以正常地完成獲取和發佈請求，顯然會導致頁面刷新，我希望這只是刷新DOM的動態，我很沮喪，我無法自己弄清楚這一點，因爲我認爲它應該很容易，轉彎在使用vuejs時，我什麼也不知道。

這裏是我的CoursesController的顯著部分：

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); 
     } 

這裏是提供課程給用戶的視圖的顯著部分，這是一個表的一部分：

<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> 

出於某種原因，@ submit.prevent方法不起作用，它工作了幾次，但後來它沒有，並且表單像往常一樣提交。

這些是app.blade.php中的腳本，我不知道應該如何編譯它，它只是坐在我的項目的主佈局中，我應該將它轉移到public/js/app .js文件？或者用gulp編譯它？如果你有什麼心事請讓我知道：

<!-- 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> 

我想有當然等於要求的任何值，這樣我就可以針對所提交的課程名稱的值並將其注入到我正在嘗試做的路線中，但我不知道如何做到這一點，我嘗試了一些不同的東西，都失敗了。 這裏是路線/ api.php

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

OFC現在這是行不通的，表單提交，而且我重定向到我回來的JSON響應的路線，這就是它，我只需要刷新dom，以便該按鈕具有取決於課程狀態的新ID，並且課程本身將在不更新頁面的情況下更新並保存在背景中。 我對此相當陌生，我知道表單可能應該重寫，而且我知道我已經犯了很多錯誤，但我只是希望它能夠工作，所以幫助將非常感激。

UPDATE

大量的試驗和錯誤小時後，我與AJAX部分完成，我幾乎沒有，其餘的我只是需要做幾件事情，這是什麼我已經成功至今做，

在視圖：

<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 

從提交按鈕更改按鈕的類型所允許的。防止方法實際觸發，現在表單不再提交，表單仍然需要工作才能輸出適當的類，具體取決於課程的狀態，但不管，

這是我現在的腳本：

<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> 

不知怎的，現在，我在實際發送POST請求到正確的路線，但有具有最高優先級，現在，美元。當然會引用添加到網頁的最新課程有問題，而不是我通過按下按鈕選擇的過程，現在無論按哪個按鈕，最後一個過程被注入到$ course，然後ofc到axois的路徑，我不知道如何計算出來，但是迄今爲止當然得到更新，如果我檢查了chrome中的網絡標籤，我看到了響應，並且完成列的值得到更新，我相信代碼中仍然存在一些錯誤，但是我會繼續嘗試，如果可以的話一些更多的東西，請讓我知道，謝謝

Answer 1

你正在使用的語法是錯誤的下面一行：

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

它應該是：

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